輪播圖制作主要思路：實(shí)現(xiàn)輪播圖滾動(dòng)的效果凉当，主要是使用animate()函數(shù)來(lái)實(shí)現(xiàn)這個(gè)過(guò)渡的動(dòng)畫效果枣申。當(dāng)向左點(diǎn)擊時(shí)，畫面向右移動(dòng)看杭，應(yīng)該把最后面的這個(gè)元素放在最前面忠藤，然后設(shè)置這個(gè)元素的父元素向左移動(dòng)n個(gè)元素寬度，此時(shí)使用animate來(lái)恢復(fù)其距離原來(lái)的距離楼雹，已達(dá)到過(guò)渡的動(dòng)畫效果模孩。向右點(diǎn)擊則相反。
html：一個(gè)div包含一個(gè)ul贮缅，ul里面的li元素設(shè)置浮動(dòng)瓜贾，橫向展開。
js代碼模塊：
/*
*RollBox: 包含ul的直系父組件携悯；Left(Right): 向左或向右點(diǎn)擊的標(biāo)簽類或ID祭芦；Step:切換的個(gè)數(shù)；Auto: 是否自動(dòng)切換
*/
function acrossSwitch (RollBox, Left, Right, Step, Auto) {
var ThisStep = 1;? ? ? //切換個(gè)數(shù)
var ThisAuto = false;? //是否自動(dòng)切換
var ThisSpeed = 500;? //播放一次動(dòng)作速度
var PlayTime = 5000;? ? //自動(dòng)切換速度
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);
});
}
}
