前面四句话，会动画执行图片移动的效果。静止状态的时候是三张图片显示在我们眼前；运动的时候，可以想象得出最多有四张图片显示在我们眼前，上面四句代码执行过程中，剖析图如下：
即在动画执行的过程中，"no1" 的图片渐渐离开屏幕可视范围，与此同时， "no4" 的图片渐渐显示在屏幕可视范围。
而在动画执行的过程中，"no0" 的这张图片早就定位到 "no4" 的位置(此时在可视范围之外，因为这里的animate动画是异步执行的，不会延迟$(.no0).css(json4)这句代码的执行。当这一组代码执行完毕后，剖析图如下：
此时，我们再将那些 处于 "waiting" 状态的图片考虑进来，则此时的剖析图如下：
2-4）以上流程执行完毕后，是完成了一次轮播效果，但是此时各个图片的牌号顺序已经被打乱，为了使得轮播继续下去，我们应该将牌号再 "恢复" 过来。所以我们可以添加以下代码：
//再交换身份 $(".no0").attr("class","waiting"); $(".no1").attr("class","no0"); $(".no2").attr("class","no1"); $(".no3").attr("class","no2"); $(".no4").attr("class","no3");
上面的代码执行后，意味着将 上图中 "no0" 这张图片拉入到 "waiting" 区域，而其他四个的编号则依次往前推算。执行完毕后，剖析图如下：
正如上图所示，"活跃"状态的5张图片，最后一张现在也变成了 "waiting" 状态，所以需要有人替补上去，才能继续动画的执行。很显然，应该拿 "waiting" 列表的第一张，也就是 "活跃" 状态的后面一张图片 "顶替" 上去；如果后面没有 "waiting" 状态的图片了， 说明这些 "waiting" 状态的图片全部 "跑到" class 为 tuul所有列表的前面去了，那就抓取这些列表的第一张作为 "顶替者"。代码如下：
if($(".no3").next().length != 0){ //如果no3后面有人，那么改变这个人的姓名为no4 $(".no3").next().attr("class","no4"); }else{ //no3前面没人，那么改变此时队列最开头的那个人的名字为no0 $(".tuul li:first").attr("class","no4"); } //发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制： $(".no4").css(json4);
这里需要注意的是：虽然已经经历了很多步奏的位置信息的改变及牌号的改变，但是刚刚被拉入等待区域的那张图片在li中的与兄弟节点的位置关系并没有发生改变，只是class属性变成了 "waiting". 即此时的tuul中li的代码结构如下：
<ul> <li><a href="#"><img src="https://www.jb51.net/images/0.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/1.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/2.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/3.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/4.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/5.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/6.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/7.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/8.jpg" /></a></li> </ul>
执行完以上代码后，剖析图如下：
