在網站設計中，輪播是一個常見而又必不可少的組件。而現在很多網站的輪播都是動態獲取圖片并輪播的，這樣不僅使網站看起來更加美觀，也提升了網站的靈活性和效率。下面我們就來學習一下如何利用jquery來獲取動態圖片進行輪播。

$(document).ready(function(){
// 定義變量
var i = 0;
var timer;
// 獲取圖片列表
var imgList = $("#imgList");
// 獲取圖片數量
var imgNum = imgList.find("li").length;
// 獲取控制按鈕列表
var btnList = $("#btnList");
// 動態創建控制按鈕
for(var j=1; j<=imgNum; j++){
btnList.append("<li></li>");
}
// 高亮第一個按鈕
btnList.find("li").eq(0).addClass("active");
// 自動輪播
timer = setInterval(function(){
i++;
moveImg();
}, 3000);
// 控制按鈕點擊事件
btnList.find("li").click(function(){
i = $(this).index();
moveImg();
});
// 鼠標移入停止輪播，移出繼續輪播
imgList.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(function(){
i++;
moveImg();
}, 3000);
});
// 圖片輪播
function moveImg(){
if(i==imgNum){
i = 0;
}
imgList.animate({left: -i*100+"%"}, 500);
btnList.find("li").removeClass("active").eq(i).addClass("active");
}
});

代碼解析：

1. 獲取圖片列表和控制按鈕列表。

2. 動態創建控制按鈕。

3. 高亮第一個控制按鈕。

4. 自動輪播。

5. 控制按鈕點擊事件。

6. 鼠標移入停止輪播，移出繼續輪播。

7. 圖片輪播。

以上就是利用jquery獲取動態圖片進行輪播的代碼和解析。希望對大家有所幫助。