面向对象的轮播图

  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 }

相关阅读:
蒟蒻的填坑计划
 现在的状态....
date modify
set source
image source
simple auth
net
bridge
iptable
namespace
原文地址：https://www.cnblogs.com/ssmin/p/12048028.html