微客导航 » 文章资讯 » javascript实现异形滚动轮播

javascript实现异形滚动轮播

2023-08-05 06:25:03 305

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

运动过程研究

让每个元素走到前一个标签的位置。
3走到2
2走到1
1走到0
0走到6

利用js动态获取每个类名对应的css样式对象，组成一个新数组。

//定义一个新数组，接收每个位置的css样式对象
varstyleArr=[];
//遍历数组添加样式对象
for(vari=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(vari=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(vari=0;i<$('li').length;i++){
$('li').eq(i).attr('class',classNameArr[i]);
}

左按钮

classNameArr.push(classNameArr.shift());

防骚扰操作：判断li标签是否处于运动状态，如果是，那么事件函数不往下执行，使用return返回。

//防骚扰
if($('li').is(':animated')){
return;
}

源码








Document

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

javascript实现异形滚动轮播

热门推荐

随机推荐