先看效果
鼠标悬浮时停止轮播，离开时自动轮播，点下一张小圆点会随着动
直接上代码
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>.wrapper{width: 600px;height: 350px;border: 1px solid red;position: relative;}/* 5张图片叠加到一块 */.wrapper img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: none;}.wrapper img:nth-of-type(1){display: block;}/* 小圆点 */.btn{width: 150px;display: flex;justify-content: space-around;position: absolute;left: 225px;bottom: 10px;z-index: 100
}.btn span{display: block;width: 15px;height: 15px;border: 3px solid white;border-radius: 50%;}/* 左右箭头 */.wrapper a{text-decoration: none;font-size: 50px;color: red;position: absolute;top: 35%;}.wrapper a:nth-of-type(1){left: 10px;}.wrapper a:nth-of-type(2){right: 10px;}.active{background-color: red;}</style></head><body><divclass="wrapper"><divclass="contain"><imgsrc="./imgs/1.png"alt=""><imgsrc="./imgs/2.png"alt=""><imgsrc="./imgs/3.png"alt=""><imgsrc="./imgs/4.png"alt=""><imgsrc="./imgs/5.png"alt=""></div><divclass="btn"><spanclass="active"></span><span></span><span></span><span></span><span></span></div><ahref="javascript:void(0);"><</a><ahref="javascript:void(0);">></a></div><scriptsrc="js/jquery-3.6.0.js"></script><script>var index=0;// 点击上一张$("a:first").click(function(){prev_pic();})// 点击下一张$("a:last").click(function(){next_pic();})// 悬浮停止$(".wrapper").mouseover(function(){clearInterval(id);});$(".wrapper").mouseout(function(){autoplay();})// 下一张functionnext_pic(){
index++;if(index>4){
index=0;}addStyle();}// 上一张functionprev_pic(){
index--;if(index<0){
index=4;}addStyle();}// 控制图片显示隐藏,小圆点背景色functionaddStyle(){$("img").eq(index).fadeIn();$("img").eq(index).siblings().fadeOut();$("span").eq(index).addClass("active");$("span").eq(index).siblings().removeClass("active");}// 自动轮播var id;autoplay();functionautoplay(){
id=setInterval(function(){next_pic();},1000)}</script></body></html>
这里只要把图片地址更换一下 ，引用jquery文件就可以了
本文转载自: https://blog.csdn.net/weixin_48466991/article/details/126674661
版权归原作者 泽泽泽Ya 所有， 如有侵权，请联系我们删除。
版权归原作者 泽泽泽Ya 所有， 如有侵权，请联系我们删除。