javascript实现异形滚动轮播

时间：2021-05-26

本文实例为大家分享了js异形滚动轮播的具体代码，供大家参考，具体内容如下

运动过程研究

让每个元素走到前一个标签的位置。
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 name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><script src="./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; } .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 class="box"> <div class="btn"> <a href="javascript:;" class="btn_left"></a> <a href="javasvript:;" class="btn_you"></a> </div> <ul class="imgs"> <li class="no0"><a href="#" ><img src="img/0.png"></a></li> <li class="no1"><a href="#" ><img src="img/1.png"></a></li> <li class="no2"><a href="#" ><img src="img/2.png"></a></li> <li class="no3"><a href="#" ><img src="img/3.png"></a></li> <li class="no4"><a href="#" ><img src="img/4.png"></a></li> <li class="no5"><a href="#" ><img src="img/5.png"></a></li> <li class="no6"><a href="#" ><img src="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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章