整理以前用jQuery实现的图片轮播效果。
1. 不做操作时，自动轮播
2. 鼠标悬浮在图片上时，停止自动轮播，隐藏在图片左右的箭头会显示出来
3. 手动轮播1：鼠标指向图片底部的小标按钮，可以切换对应的图片
4. 手动轮播2：点击左右箭头也可以切换图片
效果图：（PS：用软件捕捉的，不太会弄，感觉图片都失真了）
下面是代码区域：
**inde.html部分代码**
<div> <ul> <li><a href="#"><img src="https://www.jb51.net/images/1.jpg" alt=""/></a></li> <li><a href="#"><img src="https://www.jb51.net/images/2.jpg" alt=""/></a></li> <li><a href="#"><img src="https://www.jb51.net/images/3.jpg" alt=""/></a></li> <li><a href="#"><img src="https://www.jb51.net/images/4.jpg" alt=""/></a></li> <li><a href="#"><img src="https://www.jb51.net/images/5.jpg" alt=""/></a></li> <li><a href="#"><img src="https://www.jb51.net/images/6.jpg" alt=""/></a></li> <li><a href="#"><img src="https://www.jb51.net/images/7.jpg" alt=""/></a></li> </ul> <div> <span><</span> <span>></span> </div> <div></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>"+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(); });