卡盘（Slide）的最后一步探究

之前觉得很不可思议，淘宝卡盘（Slide）一直都是向上滚动，不出现像其他网站那样的滚到最后一个后，马上倒退式的滚到第一个位置。

相比之下前者的体验非常好，而后者就不是那么好。

然后今天看了看它的源代码，写得很分散，看来看去还是没看到最后一步的处理方式。（当然之前也问过玉伯，不过没有被搭理）

然后就开始自己尝试着去写，反反复复写了很多种实习方式，终于写着写着就发现，如果把第一个展示出来的部分（通常是第一个li）克隆（clone）到最后一个li的后面，奇迹就出现了。完美的实现了淘宝的那种卡盘。js代码如下：

var index = 0, // 当前卡盘对应的值 ul = document.getElementsByTagName('ul')[0], //取到卡盘里的内容元素 li = ul.getElementsByTagName('li'), // 卡盘的孩子 len = li.length, //所对应的孩子个数 cloneLi = li[0].cloneNode(true); //克隆所对应的第一个孩子 /** * 把第一个孩子克隆到最后面 */ ul.appendChild(cloneLi); /** * 卡盘循环执行 */ setInterval(function(){ if(index > len){ ul.style.top = '0'; index = 1; } var top = -202*index+'px'; //这用的是Kissy里的animate S.Anim(ul,{top: top}, 1, S.Easing.easeIn).run(); index++; }, 1200);

对应的html代码：

<div id="test"> <ul> <li><img src="img/1.jpg" mce_src="img/1.jpg" /><br />1</li> <li><img src="img/2.jpg" mce_src="img/2.jpg" /><br />2</li> <li><img src="img/3.jpg" mce_src="img/3.jpg" /><br />3</li> </ul> </div> 

对应的css代码：

#test{ position: relative; overflow: hidden; top: 100px; left: 100px; } ul{ position: absolute; } li{ border: 1px solid #CCCCCC; width: 200px; height: 200px; text-align: center; vertical-align: middle; } 

最近做了次更新：http://blog.csdn.net/Do_it__/archive/2011/05/02/6384178.aspx