Banner是網站首頁的重要元素之一，通過滾動展示不同的圖片、文字等內容，可以吸引用戶的注意力，提升用戶的點擊率。下面來介紹一下使用jquery實現Banner滾動的代碼：

$function(){
var $banner = $(".banner");  //獲取Banner區域的元素
var $imgBox = $banner.find(".imgBox");  //獲取圖片容器
var $imgs = $imgBox.find("img");  //獲取所有的圖片
var imgWidth = $imgs.eq(0).width();  //獲取每張圖片的寬度
var $dots = $banner.find(".dots span");  //獲取所有的小圓點
var index = 0;  //當前顯示的圖片的下標
var timer;  //定義定時器
function showImg(){  //定義顯示圖片的函數
$imgBox.stop(true,true).animate({
left: -index*imgWidth  //通過改變left值來實現圖片的滾動
},500);
$dots.eq(index).addClass("active").siblings().removeClass("active");  //當前小圓點添加高亮樣式
}
function autoPlay(){  //定義自動播放函數
timer = setInterval(function(){
index++;
if(index == $imgs.length){
index = 0;
}
showImg();
},2000);
}
autoPlay();  //默認自動播放
$banner.hover(function(){  //當鼠標移入Banner區域時停止自動播放
clearInterval(timer);
},function(){  //當鼠標移出Banner區域時繼續自動播放
autoPlay();
});
$dots.click(function(){  //當用戶點擊小圓點時切換圖片
index = $(this).index();
showImg();
});
});

上面的代碼中，首先獲取了Banner區域的元素、圖片容器、所有的圖片、所有的小圓點，確定了每張圖片的寬度，并定義了當前顯示的圖片的下標、定時器等變量。然后，定義了顯示圖片的函數和自動播放函數，并進行默認的自動播放。當鼠標移入Banner區域時停止自動播放，移出時繼續自動播放，并當用戶點擊小圓點時切換圖片。