这个是我模仿网易云的音乐界面写的轮播图，主要实现的功能有
1.每隔4秒图片和对应的背景颜色一起切换
2.点击翻页会跳转到相对应的图片以及背景上
3.点击左右翻页，实现顺序切换
<1>HTML结构
<!-- 轮播图 -->
<div class="n-ban">
<div class="n-wrap">
<div href="" class="n-flag">
<!-- 使用url的方式设置背景图片 -->
<div class="backg">
<!-- 默认第一张图片显示，其它隐藏 -->
<img src="image/song/s1.png" alt="" style="display: block;">
<img src="image/song/s2.png" alt="">
<img src="image/song/s3.png" alt="">
<img src="image/song/s4.png" alt="">
<img src="image/song/s5.png" alt="">
<img src="image/song/s6.png" alt="">
<img src="image/song/s7.png" alt="">
<img src="image/song/s8.png" alt="">
<img src="image/song/s9.png" alt="">
</div>
<!-- 翻页图标 -->
<div class="dots">
<div class="pg" style="background: #C20C0C;"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="pg"></div>
<div class="clear"></div>
</div>
<div class="n-lf"><img src="image/fonts2/left.png" alt=""></div>
<div class="n-rg"><img src="image/fonts2/right.png" alt=""></div>
</div>
<div class="dowload">
<img src="image/song/dw.png" alt="" class="dw1" style="float: left;">
<p class="dw-t">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
</div>
</div>
</div>
<2>jquery
//轮播图实现
var timer;
//!!!!!这里最不该犯错的是i没有初始化导致后面错误不可知
var i = 0;
timer = setInterval(function () {
i++;
//可用取整的方法
if (i >= $(".pg").length) {
i = 0;
}
showBanner();
}, 4000)
function showBanner() {
//改变背景颜色路径
var path = "./image/banner/ln" + i + ".png";
$(".n-ban").css("background-image", "url(" + path + ")");
$(".backg>img").eq(i).show().siblings().hide();
$(".dots").children().eq(i).css("background", "#C20C0C").siblings().css("background", "rgba(255,255,255,0.8)")
}
//点击翻页小图标切换图通过改变变量i实现
$(".pg").click(function () {
i = $(this).index();
showBanner();
});
//点击左右箭头，图跳转
$(".n-lf").click(function () {
//i=9 i=8 i=7 i=6 i=5 i=4 i=3 i=2 i=1 当i=0点击右箭头i=1，显示i=1的图片;
//i=0 i=1 i=2 i=3 i=4 i=5 i=6 i=7 i=8
//i=-9 i=-8 i=-7 i=-6 i=-5 i=-4 i=-3 i=-2 i=-1 当i=0点击左箭头此时i=-1但是需要显示i=8的图片
i--;
if(i<0){
i=i%(-$(".pg").length)+$(".pg").length;
}
showBanner();
});
$(".n-rg").click(function () {
i++;
i = i % $(".pg").length;
showBanner();
});