JQuery实现圆点轮播图自动播放
用jquery实现轮播图
实现之后的效果
实现思路
1，每次只显示一张图片其他的图片隐藏起来
2，每一次轮播 相应位置的小圆点跟着变色
3，鼠标移入小圆点时显示相应的图片
源代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="js/jquery-3.6.0.min.js"></script><style>*{margin:0;padding:0;}li{list-style: none; //这一步很重要}#container{width:900px;height:400px;position:relative;overflow:hidden;border-radius:10px;}.item{position:absolute;} #tabs{position:absolute;left:300px;bottom:20px;}.tab{float:left;margin-right:10px;width:6px;height:6px;border:3px solid #FFFFFF;border-radius:50%;background:#fff;cursor:pointer;}.active{background:#4774B6 ;border-color:#4774B6 ;}.btn{position:absolute;top:50%;margin-top:-35px;width:40px;height:70px;color:#d6d3d5;font-size:36px;line-height:70px;text-align:center;cursor:pointer;}.btn:hover{background:rgba(127,120,125,0.8);}.prev{position:absolute;left:235px;border-radius:0 5px 5px 0;}.next{position:absolute;right:0;border-radius:5px 0 0 5px;}</style></head><body><div id="container"> <a class="item" href="#"><img src="images/banner1.jpg"/></a> <a class="item" href="#"><img src="images/banner2.jpg"/></a> <a class="item" href="#"><img src="images/banner3.jpg"/></a> <a class="item" href="#"><img src="images/banner4.jpg"/></a> <a class="item" href="#"><img src="images/banner5.jpg"/></a> <ul id="tabs"><li class="tab active"></li><li class="tab"></li><li class="tab"></li><li class="tab"></li><li class="tab"></li> </ul></div></body><script>$(document).ready(function(){ var i = 0 ; var timer; //用jquery方法设置第一张图片显示，其余隐藏 $('.item').eq(0).show().siblings('.item').hide(); //调用showTime()函数（轮播函数） showTime(); //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开） $('.tab').hover(function(){ //获取当前i的值，并显示，同时还要清除定时器 i = $(this).index(); Show(); clearInterval(timer); },function(){ showTime(); }); //定时器 timer = setInterval(function(){ //调用一个Show()函数 Show(); i++; //当图片是最后一张的后面时，设置图片为第一张 if(i==5){ i=0; } },1000); //这里设置每张图片的轮播时间间隔}//创建一个Show函数function Show(){ //在这里可以用其他jquery的动画 $('.item').eq(i).fadeIn(300).siblings('.item').fadeOut(300); //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式 $('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active'); } });</script></html>问题答疑
如果出现运行时没有轮播效果记得检查自己是否引用js文件到位如果出现没有图片就检查图片的路径是否写对页面轮播时想更换小圆点的颜色只需要更改相对应的css属性即可