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>

用到的move函数是提前封装好的

 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 }
12-16 18:27