<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; padding:0; } ol,li{list-style: none;} .show{ width:600px; height:300px; background:yellow; margin:100px auto; position:relative;overflow: hidden; } .box{ height:300px; position:absolute;   } .box img{ width:600px; height:300px; float:left; } span{ width:30px; height:60px; position:absolute; top:130px; text-align:center; line-height:60px; font-weight:900; font-size:24px; cursor: pointer; } span:nth-of-type(1){ left:10px; } span:nth-of-type(2){ right:10px; } .radiusBox{ width:100%; height:20px; position:absolute; bottom:10px; display:flex; justify-content: center; } li{ width:20px; height:20px; border-radius:10px; background:#ccc; margin:0 5px; cursor: pointer; } .active{ background:red; } </style> </head> <body> <section class = "show"> <div class = "box"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> </div> <span><</span> <span>></span> <ol class = "radiusBox">
</ol> </section> </body> </html> <script src = "../move.js"></script> //运动 <script> function mover(){ this.oShow = document.querySelector(".show"); this.oBox = document.querySelector(".box"); this.oImg = document.getElementsByTagName("img"); this.span = document.querySelectorAll("span"); this.distance = this.oImg[0].offsetWidth; this.count = 0; this.cloneFirst = this.oImg[0].cloneNode(); this.oBox.appendChild(this.cloneFirst); this.oRadiusBox = document.querySelector(".radiusBox"); this.a = document.createDocumentFragment(); this.init(); } mover.prototype = { init:function(){ this.oBox.style.width=this.oImg.length*this.distance + "px"; this.bindEvent(); this.timer(); this.add(); }, toImg:function(){ move(this.oBox,{"left":-this.distance*this.count}); }, //下一张图片 nextImg:function(){ _this = this; if(this.count>=this.oImg.length-1){ this.oBox.style.left = 0; this.count = 1; }else{ this.count++ } //控制圆点样式 _this.clearActive(); this.oRadius[this.count>=this.oImg.length - 1?0:this.count].className = "active"; }, //定时器 timer : function(){ _this = this timer = setInterval(function(){ _this.nextImg(); _this.toImg(); },1000) }, //上一张图片 preImg:function(){ _this = this; if(this.count<=0){ this.oBox.style.left = - (this.oImg.length - 1)*this.distance + "px"; this.count = this.oImg.length -2; }else{ this.count--; } _this.clearActive(); this.oRadius[this.count].className = "active"; }, bindEvent:function(){ var _this =this; this.span[1].onclick=function(){ _this.nextImg(); _this.toImg(); } this.span[0].onclick = function(){ _this.preImg() _this.toImg(); } this.oShow.onmouseover = function(){ clearInterval(timer); } this.oShow.onmouseout = function(){ _this.timer(); } }, //添加圆点 add:function(){ for(var i = 0;i < this.oImg.length - 1;i++){ var creatLi = document.createElement("li") this.a.appendChild(creatLi); } this.oRadiusBox.appendChild(this.a); this.oRadius = document.querySelectorAll(".radiusBox li"); this.oRadius[0].className = "active"; //添加事件 _this = this; for(var k = 0 ; k < this.oRadius.length ; k++){ this.oRadius[k].index = k; this.oRadius[k].onmouseover = function(){ _this.clearActive() this.className = 'active'; _this.count = this.index; _this.toImg() } } }, //清除圆点样式 clearActive:function(){ for(var k = 0; k < this.oRadius.length; k++){ this.oRadius[k].className = ""; } }, //鼠标滑入滑出 shu:function(){ _this = this; this.oShow.onmouseover = function(){ clearInterval(_this.timer) } this.oShow.onmouseout = function(){ _this.timer() }   } } new mover(); </script>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄