javascript实现异形滚动轮播
更新时间：2019年11月28日 16:21:30 作者：Maybion
这篇文章主要为大家详细介绍了javascript实现异形滚动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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;
/*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 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下2017-10-10
JavaScript中的prompt是一个函数,用于在浏览器中显示一个对话框,提示用户输入一些信息,这篇文章主要给大家介绍了关于JavaScript中prompt()函数的用法实战,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了BootStrap 超链接变按钮的实现方法以及js按钮bootstrap超链接的操作方法，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了JavaScript中Pinia是否可以代替Vuex，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
Javascript 在浏览器中的性能问题，可能是最重要的可用性问题;Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行;不管是内嵌的还是外链的，下载并立即执行 因为它有可能会修改页面2012-12-12
虽然之前写过不少的javascirpt的脚本，但是对冒号:却不甚了了，感觉即陌生又熟悉，没办法老毛病又犯了，不把问题搞清楚那个(：)2009-06-06
本文为大家介绍下为何如果在页面加载完后如果调用document.write就会覆盖整个文档2014-03-03
这是一个基于insertBefore制作简单的循环插空效果，实现的数字下面循环插空效果，给需要的朋友分享。2015-09-09
这篇文章主要介绍了js鼠标滑过图片震动特效的方法,涉及onMouseOver事件及图片操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了原生JS实现音乐播放器的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
最新评论