現在網站設計中經常會用到輪播圖，它能夠很好地展示一組圖片或內容，增加網站的美觀和互動性。使用jQuery編寫的banner輪播圖，可以實現自動輪播、手動切換、添加導航按鈕等功能，并且代碼簡單易懂。

//代碼示例：
var index = 0;  //當前顯示圖片的索引
var timer;  //定時器
//切換圖片函數
function changeImg() {
var len = $(".banner-img li").length;  //獲取圖片數量
$(".banner-img li").eq(index).fadeIn().siblings().fadeOut();  //隱藏當前圖，顯示下一張
$(".banner-nav li").eq(index).addClass("active").siblings().removeClass("active");  //改變導航按鈕樣式
index++;  //索引自增
if (index == len) {
index = 0;  //循環顯示
}
timer = setTimeout(changeImg, 3000);  //設置定時器
}
//鼠標懸停在圖片上暫停輪播
$(".banner").hover(function() {
clearTimeout(timer);  //清除定時器
}, function() {
timer = setTimeout(changeImg, 3000);  //重新設置定時器
});
//點擊導航按鈕切換圖片
$(".banner-nav li").click(function() {
index = $(this).index();  //獲取點擊導航按鈕的索引
changeImg();  //調用切換圖片函數
});
//頁面加載后自動輪播
$(document).ready(function() {
timer = setTimeout(changeImg, 3000);
});

在HTML中，需要創建一個banner容器（例如div），里面包含兩個ul，一個用來顯示圖片，另一個包含導航按鈕。在CSS樣式中設置寬度、高度、背景等樣式。jQuery代碼中，定義了一個index變量用來表示當前顯示的圖片索引，設置了一個定時器每隔一段時間就自動切換一張圖片，添加了鼠標懸停在圖片上暫停輪播的功能，還可以通過點擊導航按鈕手動切換圖片。整個過程簡便易行，只需幾行代碼就能實現一個美觀實用的banner輪播圖。