JavaScript异形滚动轮播

运动过程研究

让每个元素走到前一个标签的位置。
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>

JavaScript异形滚动轮播相关推荐

html异形轮播,javascript实现异形滚动轮播
本文实例为大家分享了js异形滚动轮播的具体代码,供大家参考,具体内容如下运动过程研究让每个元素走到前一个标签的位置. 3走到2 2走到1 1走到0 0走到6 利用js动态获取每个类名对应的css样 ...
swiper横向轮播——阶梯式滚动轮播
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏 ...
html5页面3d滚动轮播,jQuery实现的3D版图片轮播示例【滑动轮播】
本文实例讲述了jQuery实现的3D版图片轮播.分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好 ...
文字从上到下无缝轮播，一直循环滚动轮播
思路:无缝循环轮播,是一个轮播框(父节点)包含两个子节点,其中一个子节点是文字主体,另一个是这个子节点的复制品,即:在父类节点一定的高度下,这两个子节点实现由下而上的滚动. 贴代码前说下大家一般遇到的 ...
原生 js 实现无缝滚动轮播
上一次我们看了如何实现简单的轮播图,以及各种常用的效果实现: 这一次,我们看看无缝滚动轮播图的实现(利用左边的margin 来实现): 原理: 我们创建一个div,下图共红色部分:然后再div中创建 ...
js实现文字无限滚动轮播
html代码 <div><ul id="ul1"><li>1111111111</li><li>2222222222&l ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
JavaScript实现图片自动轮播
目录 1.轮播图片 1.1图片切换功能 1.2定时器功能 1.3图片自动轮播实现 2.页面定时弹出广告 2.2 技术分析 2.3步骤分析 2.4代码实现 3.表单校验 3.1需求分析 3.2技术分析 ...

JavaScript异形滚动轮播

运动过程研究

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

问题：样式和对应的类名不统一，不能进行第二次运动。

源码

JavaScript异形滚动轮播相关推荐

最新文章

热门文章