1. <!DOCTYPE HTML> 
  2. <html> 
  3.  <head> 
  4.   <title> New Document </title> 
  5.   <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  6.   <base target='_blank'/> 
  7.   <style> 
  8.   body,div,ul,li{margin:0;padding:0;} 
  9.   ul,li{list-style:none;} 
  10.   img,a{display:block;} 
  11.   img{border:none;} 
  12.   .switch{overflow:hidden;width:300px;height:66px;border:1px solid #ccc;margin:50px auto 0;} 
  13.   .prev,.next{float:left;width:50px;margin-top:20px;color:red;cursor:pointer;} 
  14.   .scroll{width:198px;height:64px;overflow:hidden;float:left;border:1px solid #ccc;} 
  15.   .list{display:block;height:64px;} 
  16.   .list li{float:left;overflow:hidden;width:64px;height:64px;padding:0 1px;} 
  17.   </style> 
  18.   <script src="http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js"></script> 
  19.  </head> 
  20.  
  21.  <body> 
  22.     <div class='switch'> 
  23.         <span class='prev'>上一页</span> 
  24.         <div class='scroll'> 
  25.             <ul class='list' id='list'> 
  26.                 <li><a href="#" title=''><img src='10.jpg' width='64' height='64'/></a></li> 
  27.                 <li><a href="#" title=''><img src='20.jpg' width='64' height='64'/></a></li> 
  28.                 <li><a href="#" title=''><img src='30.jpg' width='64' height='64'/></a></li> 
  29.             </ul> 
  30.         </div> 
  31.         <span class='next'>下一页</span> 
  32.     </div> 
  33.     <script> 
  34.     /** 
  35.     * javascript左右控制按钮 
  36.     * @param 
  37.     */ 
  38.         var switchable = (function(){ 
  39.             var S = KISSY,D = S.DOM,E = S.Event; 
  40.             var max = 0,itemWidth = 0,items = D.query('#list li'), 
  41.                 list = D.get('.list'),prev = D.get('.prev'),next = D.get('.next'), 
  42.                 timer = null,flag = false,count=0,action = 'add'; 
  43.             for(var i=0;i<items.length;i++){ 
  44.                 itemWidth = items[i].offsetWidth; 
  45.                 max +=itemWidth; 
  46.             } 
  47.             var r = max *2; /* 给外层宽度的2倍 为动画做好准备 */ 
  48.             D.css('.list','width',r); 
  49.             list.innerHTML +=list.innerHTML; /* 同理 html结构增加一倍 */ 
  50.             var obj = { 
  51.                 prev : function(){ 
  52.                     if(!flag){ 
  53.                         action = "minus"; //只是为了增加一个标志 和flag一样 
  54.                         var that = this; 
  55.                         timer = setInterval(function(){ 
  56.                             that.move(); 
  57.                         },10) 
  58.                     } 
  59.                 }, 
  60.                 next : function(){ 
  61.                     if(!flag){ 
  62.                         action = 'add'; 
  63.                         var that = this; 
  64.                         timer = setInterval(function(){ 
  65.                             that.move(); 
  66.                         },10) 
  67.                     } 
  68.                 }, 
  69.                 move : function(){ 
  70.                     var list_nd = KISSY.all('.scroll'); 
  71.                     if(count < itemWidth){ 
  72.                         var n = list_nd.scrollLeft(); 
  73.                         if(action=='add'){ 
  74.                             if(n>=max){ 
  75.                                 list_nd.scrollLeft(0); 
  76.                                 n = list_nd.scrollLeft(); 
  77.                                 list_nd.scrollLeft(n+2); 
  78.                             }else{ 
  79.                                 list_nd.scrollLeft(n+2); 
  80.                             } 
  81.                         }else{ 
  82.                             if(n<=0){ 
  83.                                 list_nd.scrollLeft(max); 
  84.                                 n = list_nd.scrollLeft(); 
  85.                                 list_nd.scrollLeft(n-2); 
  86.                             }else{ 
  87.                                 list_nd.scrollLeft(n-2); 
  88.                             } 
  89.                         } 
  90.                         count = count + 2; 
  91.                     }else{ 
  92.                         flag = false; 
  93.                         clearInterval(timer); 
  94.                         count = 0; 
  95.                     } 
  96.                 } 
  97.             } 
  98.             E.on(prev,'click',function(){ 
  99.                 obj.prev(); 
  100.             }); 
  101.             E.on(next,'click',function(){ 
  102.                 obj.next(); 
  103.             }) 
  104.         })() 
  105.  
  106.     </script> 
  107.  </body> 
  108. </html>