JS实现轮播图

最新推荐文章于 2024-04-09 17:12:14 发布

WJLONG_123

最新推荐文章于 2024-04-09 17:12:14 发布

阅读量313

点赞数

思路：
1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片
2、container内有个放图片的list进行position的定位，其中的图片采用float的方式，同时当图片进行轮播时，改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器，通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片

6、图片可以通过点击pre,next进行左右滑动显示

详细代码：

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>轮播图</title><styletype="text/css">.container{margin:0 auto; width:600px;height:400px;position: relative;overflow: hidden;border:4px solid gray; box-shadow:3px 3px 5px gray;border-radius:10px;} .list{ width:4200px;height:400px;position: absolute;top:0px;} img{ float:left;width:600px;height:400px;} .dots{ position: absolute;left:40%;bottom:30px;list-style: none;} .dots li{ float:left;width:8px;height:8px;border-radius:50%;background: gray;margin-left:5px} .dots .active{ background: white;} .pre,.next{position: absolute;top:40%;font-size:40px;color:white;text-align:center;background:rgba(128,128,128,0.5);display:none;} .pre{ left:30px;} .next{ right:30px;} </style></head><body><divclass="container"><divclass="list"style=" left:-600px;"><imgsrc="img/5.jpg"><imgsrc="img/1.jpg"><imgsrc="img/2.jpg"><imgsrc="img/3.jpg"><imgsrc="img/4.jpg"><imgsrc="img/5.jpg"><imgsrc="img/1.jpg"></div><ulclass="dots"><liindex=1class="active dot"></li><liindex=2class="dot"></li><liindex=3class="dot"></li><liindex=4class="dot"></li><liindex=5class="dot"></li></ul><divclass="pre"><</div><divclass="next">></div></div><scripttype="text/javascript">var index=1,timer; window.onload = init;/*初始化函数*/functioninit(){ eventBind(); autoPlay(); }/*自动轮播*/functionautoPlay(){ timer =setInterval(function() { animation(-600); dotIndex(true); },1000) }/*停止轮播*/functionstopAutoPlay() { clearInterval(timer); }/*改变dot的显示*/functiondotIndex(add){if(add){ index++; }else{ index--; }if(index>5){ index =1; }if(index<1){ index =5; } dotActive(); }functiondotActive() {var dots = document.getElementsByClassName("dot");var len = dots.length;for(var i=0 ;i<len ;i++){ dots[i].className = "dot"; } for(var i=0;i<len;i++){/*此处可以不用parseInt，当不用全等时*/if(index ===parseInt(dots[i].getAttribute("index"))){ dots[i].className ="dot active"; } } }/*初始化事件绑定*/functioneventBind(){/*点的点击事件*/var dots = document.getElementsByClassName("dot");var len = dots.length;for(var i=0;i<len;i++){ (function(j){ dots[j].onclick = function(e){var ind =parseInt(dots[j].getAttribute("index")); animation((index - ind)*(-600));/*显示点击的图片*/ index = ind; dotActive(); } })(i) } /*容器的hover事件*/ var con = document.getElementsByClassName("container")[0];/*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/ con.onmouseover =function(e) { stopAutoPlay(); document.getElementsByClassName("pre")[0].style.display = "block"; document.getElementsByClassName("next")[0].style.display ="block"; } con.onmouseout =function(e){ autoPlay(); document.getElementsByClassName("pre")[0].style.display ="none"; document.getElementsByClassName("next")[0].style.display = "none"; } /*箭头事件的绑定*/ var pre = document.getElementsByClassName("pre")[0];var next = document.getElementsByClassName("next")[0]; pre.onclick = function(e) { dotIndex(false); animation(600); } next.onclick = function(e) { dotIndex(true); animation(-600); } } /*list容器的偏移量是图片轮播*/ functionanimation(offset){var lists = document.getElementsByClassName("list")[0];var left =parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;if(left<-3000){ lists.style.left ="-600px"; }elseif(left>-600){ lists.style.left ="-3000px"; }else{ lists.style.left = left+"px"; } }</script></body></html>