使用jQuery进行轮播图

<div class="Slides"> ???<ul class="pics"> ???????<li ><img src="img/banner1.jpg" width="1920px" height="500px"></li> ???????<li ><img src="img/banner1.jpg" ?width="1920px" height="500px"></li> ???????<li ><img src="img/banner1.jpg" ?width="1920px" height="500px"></li> ???</ul> ???<div id="buttons"> ???????<span ?class="picsli on" index="1"></span> ???????<span ?class="picsli" index="1"></span> ???????<span ?class="picsli" index="1"></span> ???</div> ???<a id="prev" class="unslider-arrow04 prev "><img src="img/l.png"></a> ???<a id="next" class="unslider-arrow04 next"><img src="img/r.png"></a></div>

.Slides{ ???border-top:10px ?solid #533336; ???clear: both; ???position: relative;}.pics{ ??width: 1920px; ???height: 500px; ???overflow: hidden;}#buttons{ ???position: absolute; ???height: 10px; ???width: 100px; ???z-index:2; ???bottom: 80px; ???left: 50%; ???margin-left: -36px ;}#buttons .on { ???background: #fff;}#buttons span{ ???cursor: pointer; ???float: left; ???border: 2px solid #fff; ???width: 18px; ???height: 18px; ???border-radius: 50%; ???background: #333; ???margin-right: 8px;}#next{ ???position: absolute; ???right: 0; ???top: 40%;}#next :hover{ ???background-color: white; ???opacity: 0.5%;}#prev{ ???position: absolute; ???float: left; ???top: 40%;}#prev :hover{ ???background-color: white; ???opacity: 0.5%;}

$(function(){ ???//赋予变量 ???var i = 0; ???function run(){ ???????i++; ???????//判断，让图片循环播放，还可以用三元表达式写 ???????// if(i==5){ ???????// ????i=0; ???????// }; ???????i= (i==3)?0:i; ???????// 让i号图片显示，让它的兄弟元素隐藏 ???????$(".pics li").eq(i).fadeIn(1000).siblings("li").fadeOut(1000); ???????//让li变红 ???????$("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on"); ???} ???//设置定时器，自动轮播 ???var timer = setInterval(run,5000); ???//给鼠标加入移入事件 ???$(".pics li").mouseenter(function(){ ???????var jqthis = $(this); ???????clearInterval(timer); ???????//鼠标快速移动小bug ???????tt = setTimeout(function(){ ???????????//停止定时器 ???????????//如果$(this)写在定时器里，那它指向的就是定时器 ???????????i = jqthis.index(); ???????????// 让i号图片显示，让它的兄弟元素隐藏,stop()清除累加动作； ???????????$(".pics li").eq(i).stop().fadeIn(1000).siblings("li").stop().fadeOut(1000); ???????????//让li变红 ???????????$("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on"); ???????},200) ???}) ???//鼠标移出事件 ???$(".pics li").mouseleave(function(){ ???????//清除定时炸弹，这是为了解决鼠标快速滑动的小bug ???????clearTimeout(tt); ???????//恢复定时器 ???????timer = setInterval(run,5000); ???}) ???//左右切换 ???$("#prev").click(function(){ ???????clearInterval(timer); ???????i--; ???????//判断，让图片循环播放，还可以用三元表达式写 ???????// if(i==-1){ ???????// ????i=4; ???????// }; ???????i= (i==-1)?2:i; ???????// 让i号图片显示，让它的兄弟元素隐藏 ???????$(".pics li").eq(i).stop().fadeIn(1000).siblings("li").stop().fadeOut(1000); ???????//让li变红 ???????$("#buttons span").eq(i).addClass("on").siblings("span").removeClass("on"); ???}); ???$("#next").click(function(){ ???????clearInterval(timer); ???????//debugger ???????run(); ???});})