轮播图制作主要思路：实现轮播图滚动的效果，主要是使用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);
});
}
}
