jQuery实现一个简单的轮播图

article/2025/10/19 0:36:08

一.轮播图内容组成

包括：4张图片，图片标号，向左翻页，向右翻页的几个部分，如下图所示：

二.实现功能

1.加载页面后，4张图片默认从第一张图片开始轮播，索引值为1。

2.当把鼠标over到图片上时，图片定住不动。

3.点击图片索引值可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播.

4.点击【向左翻页】/【向右翻页】可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播。

三.HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="outer"><ul class="img"><li><img src="image/1.jpg"></li><li><img src="image/2.jpg"></li><li><img src="image/3.jpg"></li><li><img src="image/4.jpg"></li></ul><ul class="num"><li>1</li><li>2</li><li>3</li><li>4</li></ul><div class="btn_left button"> < </div><div class="btn_right button"> > </div></div>
</body>
</html>

四.CSS代码

1.图片的长宽与其父级div一致并填满div

        *{margin:0px;padding:0px;}.outer{position:relative;width:500px;height:300px;border:dashed cadetblue 2px;margin:0 auto;}ul li{list-style:none;}img{width:500px;height:300px;position:absolute;top:0px;left:0px;}.num{position:absolute;bottom:10px;font-size:0px;width:100%;text-align:center;}.num li{width:20px;height:20px;background-color:gray;border-radius:60%;text-align:center;line-height:20px;display:inline-block;font-size:10px;margin:3px;cursor:pointer;}.button{width:20px;height:60px;line-height:60px;text-align:center;background-color:gray;opacity:0.6;position:absolute;top:50%;margin-top:-30px;font-size:20px;font-weight:bolder;display:none;cursor:pointer;}.btn_right{position:absolute;right:0px;}.outer:hover .button{display:block;}.outer .num li.current{background-color:red;}

五.js代码

        <script src="jquery-3.4.1.js"></script><script>//初始时，索引1背景为红色，并显示第一张图片，$(".num li").first().addClass("current");$(".img li").first().show().siblings().hide();//鼠标over在索引值上时，切换图片，并将当前索引复制给全局变量i，便于接下来从当前图片开始轮播$(".num li").mouseover(function(){$(this).addClass("current").siblings().removeClass("current");var index=$(this).index();$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);i=index;});i=0;//全局变量，记录当前轮播图的索引//播放下一张图片的函数function move(){i++;if (i>3){i=0;}$(".num li").eq(i).addClass("current").siblings().removeClass("current");$(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);}//每2s播放下一张图片var time=setInterval(move,2000);//鼠标放在.outer区域时，轮播停止；离开时，轮播继续$(".outer").hover(function(){clearInterval(time)},function(){time=setInterval(move,2000);});//点击向右翻页$(".btn_right").click(function(){move();});//点击向左翻页时，先将i-2,再向右翻页$(".btn_left").click(function(){i=i-2;if (i<-1){i=2;}move();})</script>