html异形轮播,javascript实现异形滚动轮播

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

运动过程研究

让每个元素走到前一个标签的位置。

3走到2

2走到1

1走到0

0走到6

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

// 定义一个新数组，接收每个位置的css样式对象

var styleArr = [];

// 遍历数组添加样式对象

for (var i =0; 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

$('.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').eq(i).attr('class', classNameArr[i]);

}

左按钮

classNameArr.push(classNameArr.shift());

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

// 防骚扰

if ($('li').is(':animated')) {

return;

}

源码

Document

* {

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%;

}

• 
• 
• 
• 
• 
• 
• 

// 定义一个数组，接收每个位置的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]);

}

})

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