banner輪播 jquery

banner輪播是在網頁中常見的一種展示形式，可以使頁面的視覺效果更加豐富。在前端開發中，使用jquery的輪播插件可以方便實現這一效果。下面介紹一個基于jquery的簡單的banner輪播實現方法。

// HTML結構
// CSS樣式
.banner {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.banner-list {
position: absolute;
left: 0;
top: 0;
width: 300%;
height: 100%;
}
.banner-list li {
float: left;
width: 33.333%;
height: 100%;
}
.banner-nav {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
z-index: 1;
}
.banner-nav li {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
background-color: rgba(255,255,255,0.5);
}
.banner-nav li.active {
background-color: #fff;
}
.banner-prev,
.banner-next {
position: absolute;
top: 50%;
margin-top: -20px;
z-index: 2;
color: #fff;
}
.banner-prev {
left: 10px;
}
.banner-next {
right: 10px;
}
// JS代碼
$(function(){
var index = 0;
var timer;
var imgWidth = $(".banner-list li").width();
var len = $(".banner-list li").length;
// 切換banner
function changeBanner(){
index++;
if(index == len){
index = 0;
}
$(".banner-list").animate({
left: -imgWidth * index
});
$(".banner-nav li").eq(index).addClass("active").siblings().removeClass("active");
}
// 自動輪播
timer = setInterval(changeBanner, 3000);
// 鼠標懸停停止輪播
$(".banner").mouseenter(function(){
clearInterval(timer);
}).mouseleave(function(){
timer = setInterval(changeBanner, 3000);
});
// 點擊左右箭頭切換
$(".banner-prev").click(function(){
index--;
if(index< 0){
index = len - 1;
}
$(".banner-list").animate({
left: -imgWidth * index
});
$(".banner-nav li").eq(index).addClass("active").siblings().removeClass("active");
});
$(".banner-next").click(function(){
changeBanner();
});
// 點擊底部導航切換
$(".banner-nav li").click(function(){
index = $(this).index();
$(".banner-list").animate({
left: -imgWidth * index
});
$(this).addClass("active").siblings().removeClass("active");
});
});