1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .cont{width: 1000px;height: 600px;margin: 20px auto;position: relative;overflow: hidden;} 10 .imgbox a{width: 1000px;height: 600px;position: absolute;left: 0;top: 0;overflow: hidden;} 11 .imgbox img{width: 1000px;height: 600px;} 12 .imgbox a:nth-child(1){z-index: 1;} 13 .btns input{position: absolute;top: 270px;z-index: 999;width: 50px;height: 60px;border: none;outline: none;background: rgba(200, 200, 200, 0.6);} 14 .left{left: 0;} 15 .right{right: 0;} 16 </style> 17 </head> 18 <body> 19 <div class="cont"> 20 <div class="imgbox"> 21 <a href=""><img src="img/Lux1.jpg" alt=""></a> 22 <a href=""><img src="img/Lux2.jpg" alt=""></a> 23 <a href=""><img src="img/Lux3.jpg" alt=""></a> 24 <a href=""><img src="img/Lux4.jpg" alt=""></a> 25 <a href=""><img src="img/Lux5.jpg" alt=""></a> 26 <a href=""><img src="img/Lux6.jpg" alt=""></a> 27 <a href=""><img src="img/Lux7.jpg" alt=""></a> 28 <a href=""><img src="img/Lux8.jpg" alt=""></a> 29 <a href=""><img src="img/Lux9.jpg" alt=""></a> 30 </div> 31 <div class="btns"> 32 <input type="button" class="left" value="<<"> 33 <input type="button" class="right" value=">>"> 34 </div> 35 </div> 36 </body> 37 <script src="../move.js"></script> 38 <script> 39 function Banner(){ 40 this.left = document.querySelector(".left"); 41 this.right = document.querySelector(".right"); 42 this.img = document.querySelectorAll(".imgbox a"); 43 console.log(this.img) 44 this.i = 1; 45 46 this.index = 0; 47 48 this.iPrev; 49 50 this.addEvent(); 51 } 52 console.log(this.i); 53 54 Banner.prototype.addEvent = function(){ 55 var that = this; 56 this.left.onclick = function(){ 57 that.changeIndexL(); 58 } 59 this.right.onclick = function(){ 60 that.changeIndexR(); 61 } 62 } 63 64 Banner.prototype.changeIndexL = function(){ 65 if(this.index == 0){ 66 this.index = this.img.length-1; 67 this.iPrev = 0; 68 }else{ 69 this.index--; 70 this.iPrev = this.index + 1; 71 } 72 this.move(1); 73 } 74 75 Banner.prototype.changeIndexR = function(){ 76 if(this.index == this.img.length-1){ 77 this.index = 0; 78 this.iPrev = this.img.length-1; 79 }else{ 80 this.index++; 81 this.iPrev = this.index - 1; 82 } 83 this.move(-1); 84 } 85 // console.log(this.i); 86 87 Banner.prototype.move = function(d){ 88 console.log(this.index) 89 90 this.img[this.index].style.zIndex = this.i++; 91 92 this.img[this.index].style.left = -1000 * d + "px"; 93 94 move(this.img[this.index],{left:0}); 95 96 this.img[this.iPrev].style.left = 0; 97 98 move(this.img[this.iPrev],{left:1000 * d}); 99 } 100 101 new Banner(); 102 103 104 </script> 105 </html>
Use the move function is packaged in advance
1 function move(ele,data,end){ 2 clearInterval(ele.t); 3 ele.t = setInterval(() => { 4 var onoff = true; 5 for(var i in data){ 6 var iNow = parseInt(getStyle(ele,i)); 7 var speed = (data[i] - iNow)/7; 8 speed = speed<0 ? Math.floor(speed) : Math.ceil(speed); 9 10 (data[i] != iNow) && (onoff = false); 11 ele.style[i] = iNow + speed + "px"; 12 } 13 if(onoff){ 14 clearInterval(ele.t); 15 end && end(); 16 } 17 }, 30); 18 } 19 function getStyle(ele,attr){ 20 if(getComputedStyle){ 21 return getComputedStyle(ele,false)[attr]; 22 }else{ 23 return ele.currentStyle[attr]; 24 } 25 }
