jquery实现轮播图切换

这个是我模仿网易云的音乐界面写的轮播图，主要实现的功能有

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="data:image/song/s1.png" alt="" style="display: block;">

<img src="data:image/song/s2.png" alt="">

<img src="data:image/song/s3.png" alt="">

<img src="data:image/song/s4.png" alt="">

<img src="data:image/song/s5.png" alt="">

<img src="data:image/song/s6.png" alt="">

<img src="data:image/song/s7.png" alt="">

<img src="data:image/song/s8.png" alt="">

<img src="data: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="data:image/fonts2/left.png" alt=""></div>

<div class="n-rg"><img src="data:image/fonts2/right.png" alt=""></div>

</div>

<div class="dowload">

<img src="data: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();

});