jQuery实现图片轮播效果代码

<div class="box"> <ul class="img">  <li class="photo"><a href="#"><img src="images/1.jpg" alt=""/></a></li>  <li class="photo"><a href="#"><img src="images/2.jpg" alt=""/></a></li>  <li class="photo"><a href="#"><img src="images/3.jpg" alt=""/></a></li>  <li class="photo"><a href="#"><img src="images/4.jpg" alt=""/></a></li>  <li class="photo"><a href="#"><img src="images/5.jpg" alt=""/></a></li>  <li class="photo"><a href="#"><img src="images/6.jpg" alt=""/></a></li>  <li class="photo"><a href="#"><img src="images/7.jpg" alt=""/></a></li> </ul> <div>  <span class="jt" id="jtLeft"><</span>  <span class="jt" id="jtRight">></span> </div> <div class="numList"></div></div>

.box{ padding:0; width: 800px; height: 500px;  margin: 0 auto; position:relative;}ul.img{ padding:0; margin: 0 auto;}ul.img .photo{ list-style: none; position: absolute;  display: none;}img{ width: 800px; height: 500px;}.box .img .active{ display: block;}.jt{ width: 40px; height: 50px; background-color: rgba(0,0,0,0.5); position: absolute; top:50%; margin-top: -25px; line-height: 50px; font-size: 30px;  color: white; font-weight: 800; text-align: center;  display: none;}#jtRight{ right: 0;}.numList{ font-size: 0; position: absolute; bottom:10px; left: 50%; margin-left:-70px; }.numList .num{ background-color: black; width: 20px; height: 20px; border-radius: 50%; color: white; text-align: center; font-size: 14px; display: inline-block;}.numList .check{ background-color: red;}

$(function(){ /*定义全局变量，用来记录表示显示的图片的下标*/ var i=0; /*按图片的数量添加下标*/ var size=$(".photo").size(); for (var j=1;j<=size;j++){  var span=$("<span class='num'>"+j+"</span>");  $(".numList").append(span); } /*默认选中第一个下标和显示第一张图片*/ $(".photo:eq(0)").addClass("active"); $(".num:eq(0)").addClass("check"); /*手动轮播*/ var HandleImgChange=function(){  $(".num").each(function(){   $(this).mouseover(function(){    $(this).siblings().removeClass("check");    $(this).addClass("check");    /*获得选择的下标值*/    i=$(this).index();    $(".photo").hide();    $(".photo").eq(i).show();   });  }); }; /*显示下一张图*/ var move=function(){  i++;  if(i>size-1){   i=0;  }  $(".num").eq(i).addClass("check").siblings().removeClass("check");  $(".photo").eq(i).show().siblings().hide(); }; /*自动轮播*/ var AutoImgChange=function(){  var t=setInterval(move,1000);  $(".box").hover(function(){   $(this).css({"cursor":"pointer"});   $(".jt").css({"display":"block"});   clearInterval(t);  },function(){   $(".jt").css({"display":"none"});   t=setInterval(move,1000);  }) }; /*设置左右箭头点击事件*/ var jtL=function(){  $("#jtLeft").click(function(){   i--;   if(i<0){    i=size-1;   }   $(".num").eq(i).addClass("check").siblings().removeClass("check");   $(".photo").eq(i).show().siblings().hide();  }) }; var jtR=function(){  $("#jtRight").click(function(){   move();  }) }; HandleImgChange(); AutoImgChange(); jtR(); jtL();});