jQuery輪播圖是一個非常流行的前端插件，可以讓網(wǎng)站增加動態(tài)效果。其中，圖片的切換是最為重要的一個環(huán)節(jié)。

$(function(){
var currentIndex = 0; // 當(dāng)前顯示的圖片索引
var $imgs = $('#banner .item'); // 圖片列表
var count = $imgs.length; // 圖片數(shù)量
var $dots = $('#banner .dots span'); // 小圓點列表
// 定時器，每隔一定時間切換圖片
var timer = setInterval(function(){
var nextIndex = (currentIndex + 1) % count;
changeImg(currentIndex, nextIndex);
currentIndex = nextIndex;
}, 4000);
// 切換圖片函數(shù)
function changeImg(currentIndex, nextIndex){
$imgs.eq(currentIndex).fadeOut(800);
$imgs.eq(nextIndex).fadeIn(800);
$dots.eq(currentIndex).removeClass('active');
$dots.eq(nextIndex).addClass('active');
}
// 鼠標(biāo)懸停在輪播圖上時停止自動切換
$('#banner').hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(function(){
var nextIndex = (currentIndex + 1) % count;
changeImg(currentIndex, nextIndex);
currentIndex = nextIndex;
}, 4000);
});
// 點擊小圓點切換圖片
$dots.click(function(){
var nextIndex = $(this).index();
changeImg(currentIndex, nextIndex);
currentIndex = nextIndex;
});
});

上面的代碼是一個基本的jQuery輪播圖實現(xiàn)，其中關(guān)鍵的部分就是切換圖片的函數(shù)changeImg，它使用fadeIn和fadeOut方法來實現(xiàn)漸變切換效果。

另外，定時器也是實現(xiàn)自動切換圖片功能的關(guān)鍵，它在頁面加載時會被設(shè)置成每隔4秒鐘切換一張圖片。鼠標(biāo)懸停在輪播圖上時，會停止自動切換，移開鼠標(biāo)時則繼續(xù)自動切換。

如果想要讓用戶能夠主動切換圖片，則可以為小圓點添加click事件。在事件處理函數(shù)中，可以通過index方法獲取用戶點擊的小圓點對應(yīng)的圖片索引，并調(diào)用changeImg函數(shù)切換圖片。

通過以上的方法，就可以實現(xiàn)一個簡單又實用的jQuery輪播圖，讓網(wǎng)站在視覺上更加生動有趣。