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