整理以前用jQuery实现的图片轮播效果。

1. 不做操作时，自动轮播
2. 鼠标悬浮在图片上时，停止自动轮播，隐藏在图片左右的箭头会显示出来
3. 手动轮播1：鼠标指向图片底部的小标按钮，可以切换对应的图片
4. 手动轮播2：点击左右箭头也可以切换图片

效果图：（PS：用软件捕捉的，不太会弄，感觉图片都失真了）

下面是代码区域：

**inde.html部分代码**

<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>

**reset.css代码**

.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;}

**main.js代码**

$(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();});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。