jQuery輪播圖可以實(shí)現(xiàn)圖片的自動(dòng)輪換，讓網(wǎng)頁(yè)更具動(dòng)感。接下來(lái)我們來(lái)學(xué)習(xí)關(guān)于jQuery輪播圖來(lái)回輪播的知識(shí)。

$(function(){
//獲取到輪播的個(gè)數(shù)
var length = $("#carousel-img").children().length;
var currentIndex = 1;
var interval;
//設(shè)置輪播函數(shù)，每隔2秒執(zhí)行一次
function loop(){
interval = setInterval(function(){
currentIndex++;
if(currentIndex === length){
currentIndex = 1;
$("#carousel-img").css({
left:0
});
}
//實(shí)現(xiàn)輪播過(guò)程
$("#carousel-img").animate({
left:-($("#carousel-img").children().width() * (currentIndex - 1))
}, 500);
}, 2000);
}
loop();
});

代碼中，我們首先通過(guò)獲取輪播數(shù)目獲取到輪播的個(gè)數(shù)，然后通過(guò)setInterval函數(shù)設(shè)置輪播的時(shí)間間隔，使得輪播圖每隔2秒就可以切換。在loop函數(shù)中，我們通過(guò)currentIndex來(lái)控制當(dāng)前展示的輪播圖片，每輪播一張圖片，就將currentIndex加1，當(dāng)currentIndex等于length時(shí)，即展示完畢，跳轉(zhuǎn)至第一張圖片。在animate函數(shù)中，我們通過(guò)設(shè)置 left值，實(shí)現(xiàn)輪播過(guò)程，同時(shí)通過(guò)控制動(dòng)畫(huà)速度，使得輪播效果更加流暢。

通過(guò)上述的代碼，我們可以實(shí)現(xiàn)jQuery輪播圖的來(lái)回輪播。如果需要實(shí)現(xiàn)其他的輪播效果，只需要在輪播函數(shù)中進(jìn)行相應(yīng)的修改即可。