让每个元素走到前一个标签的位置。
3走到2
2走到1
1走到0
0走到6
利用js动态获取每个类名对应的css样式对象，组成一个新数组。
// 定义一个新数组，接收每个位置的css样式对象 var styleArr = []; // 遍历数组添加样式对象 for (var i =0; i <$('li').length; i++) { styleArr.push({ "width": $('li').eq(i).css('width'), "height": $('li').eq(i).css('height'), "left": $('li').eq(i).css('left'), "top": $('li').eq(i).css('top') }); }
可以使用animate方法发生移动：
animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。
// 右按钮事件 $('.btn_you').click(function () { // 后面的元素走到前面上一个位置 for (var i =1; i <$('li').length; i++) { $('.no'+ i).animate(styleArr[i -1], 300) } // 0位置的li直接更改css样式，切换到6的位置 $('.no0').animate(styleArr[6], 300); })
问题：样式和对应的类名不统一，不能进行第二次运动。
解决方法：进行对应位置的类名轮换。
可以将7个类名放在数组中，每次实现将最后一项删除，添加到第一项。
pop 方法
从数组中移除最后一个元素并将该元素返回
push 方法
将新元素追加到一个数组中，并返回数组的新长度。
shift 方法
从数组中移除第一个元素并将返回该元素。
unshift 方法
在数组的开头插入新元素。
//运动结束后，要让li的类名和位置统一，切换类名 classNameArr.unshift(classNameArr.pop());
将得到新数组中的类名赋值给对应li标签。
// 循环给li添加新的类名 for (var i =0; i <$('li').length; i++) { $('li').eq(i).attr('class', classNameArr[i]); }
左按钮
classNameArr.push(classNameArr.shift());
防骚扰操作：判断li标签是否处于运动状态，如果是，那么事件函数不往下执行，使用return返回。
// 防骚扰 if ($('li').is(':animated')) { return; }
源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <script src="https://www.jb51.net/article/js/jquery-1.8.3.js"></script> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { position: relative; width: 670px; height: 325px; background: url(./img/pic_bg.gif)no-repeat; margin: 100px auto; /*overflow: hidden;*/ } .box .btn a { position: absolute; width: 41px; height: 41px; background: #f00; top: 151px; } .box .btn .btn_left { left: 25px; } .box .btn .btn_you { right: 25px; } .box .imgs li { position: absolute; } .box .imgs .no0 { width: 80px; height: 50px; left: -90px; top: 72px; } .box .imgs .no1 { width: 90px; height: 60px; left: 14px; top: 62px; } .box .imgs .no2 { width: 110px; height: 80px; left: 118px; top: 43px; } .box .imgs .no3 { width: 150px; height: 100px; left: 253px; top: 22px; } .box .imgs .no4 { width: 110px; height: 80px; left: 433px; top: 43px; } .box .imgs .no5 { width: 90px; height: 60px; left: 564px; top: 62px; } .box .imgs .no6 { width: 80px; height: 50px; left: 680px; top: 72px; } .box .imgs li img { width: 100%; height: 100%; } </style> <body> <div> <div> <a href="javascript:;"></a> <a href="https://www.jb51.net/javasvript:;"></a> </div> <ul> <li><a href="#" ><img src="https://www.jb51.net/img/0.png"></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/1.png"></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/2.png"></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/3.png"></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/4.png"></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/5.png"></a></li> <li><a href="#" ><img src="https://www.jb51.net/img/6.png"></a></li> </ul> </div> </body> <script> // 定义一个数组，接收每个位置的css样式对象 var styleArr = []; // 遍历数组添加样式对象 for (var i = 0; i < $('li').length; i++) { // push 方法 将新元素追加到一个数组中 styleArr.push({ "width": $('li').eq(i).css('width'), "height": $('li').eq(i).css('height'), "left": $('li').eq(i).css('left'), "top": $('li').eq(i).css('top') }); } console.log(styleArr); // // 建立类名数组 var classNameArr = []; // 遍历添加类名 for (var i = 0; i < $('li').length; i++) { classNameArr.push($('li').eq(i).attr('class')); } console.log(classNameArr); // // // 右按钮事件 $('.btn_you').click(function () { // 防骚扰 if ($('li').is(':animated')) { return; } // 后面的元素走到前面上一个位置 for (var i = 1; i < $('li').length; i++) { $('.no' + i).animate(styleArr[i - 1], 300) } // 0位置的li直接更改css样式，切换到6的位置 $('.no0').css(styleArr[6], 300); //运动结束后，要让li的类名和位置统一，切换类名 classNameArr.unshift(classNameArr.pop()); // console.log(classNameArr); // 循环给li添加新的类名 for (var i = 0; i < $('li').length; i++) { $('li').eq(i).attr('class', classNameArr[i]); } }) // // 左按钮事件 $('.btn_left').click(function () { // 防骚扰 if ($('li').is(':animated')) { return; } // 后面的元素走到前面上一个位置 for (var i = 0; i < $('li').length - 1; i++) { $('.no' + i).animate(styleArr[i + 1], 300) } // 6位置的li直接更改css样式，切换到0的位置 $('.no6').css(styleArr[0], 300); //运动结束后，要让li的类名和位置统一，切换类名 classNameArr.push(classNameArr.shift()); // console.log(classNameArr); // 循环给li添加新的类名 for (var i = 0; i < $('li').length; i++) { $('li').eq(i).attr('class', classNameArr[i]); } }) </script> </html>