Jquery 轮播图制作

轮播图制作主要思路：实现轮播图滚动的效果，主要是使用animate()函数来实现这个过渡的动画效果。当向左点击时，画面向右移动，应该把最后面的这个元素放在最前面，然后设置这个元素的父元素向左移动n个元素宽度，此时使用animate来恢复其距离原来的距离，已达到过渡的动画效果。向右点击则相反。

html：一个div包含一个ul，ul里面的li元素设置浮动，横向展开。

js代码模块：

/*

*RollBox: 包含ul的直系父组件；Left(Right): 向左或向右点击的标签类或ID；Step:切换的个数；Auto: 是否自动切换

*/

function acrossSwitch (RollBox, Left, Right, Step, Auto) {

var ThisStep = 1;      //切换个数

var ThisAuto = false;  //是否自动切换

var ThisSpeed = 500;  //播放一次动作速度

var PlayTime = 5000;    //自动切换速度

var RollUL = $(RollBox).find(">ul");

var RollBoxLi = RollUL.find(">li");

var LiWidth = RollBoxLi.outerWidth(true);

var LiLength = RollBoxLi.length;

RollUL.width(LiWidth * LiLength);

if (arguments[3]) ThisStep = Step;

if (arguments[4]) ThisAuto = Auto;

if (arguments[5]) ThisSpeed = Speed;

var MoveSize = LiWidth * ThisStep;

/*左右切换*/

function LeftRoll() {

for (i = 0; i < Step; i++) {

RollUL.find(">li:last").prependTo(RollUL);

}

RollUL.css({ "margin-left": -MoveSize });

RollUL.animate({ "margin-left": "0px" }, ThisSpeed);

}

function RightRoll() {

RollUL.animate({ "margin-left": -MoveSize }, ThisSpeed, function () {

for (i = 0; i < Step; i++) {

RollUL.find(">li:first").appendTo(RollUL);

}

RollUL.css({ "margin-left": "0px" });

});

}

$(document).on('click', '.channel-set', function(){

LeftRoll();

});

$(document).on('click', '.channel-ui', function(){

RightRoll();

});

$(Right).click(function () {

RightRoll();

});

$(Left).click(function () {

LeftRoll();

});

if (ThisAuto) {

var AutoPlay = setInterval(function () { RightRoll() }, PlayTime);

$(Right).hover(function () {

clearInterval(AutoPlay);

}, function () {

AutoPlay = setInterval(function () { RightRoll() }, PlayTime);

});

$(Left).hover(function () {

clearInterval(AutoPlay);

}, function () {

AutoPlay = setInterval(function () { RightRoll() }, PlayTime);

});

}

}