面向对象实现无缝轮播

布满荆棘的人生 2021-09-29 03:36 421阅读 0赞

以下是html代码，图片可以随意更改

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         section{
         
    10             width:1000px;
    11             height:400px;
    12             margin:100px auto;
    13             position: relative;
    14             overflow: hidden;
    15         }
    16         div{
         
    17             position: absolute;
    18             height:400px;
    19         }
    20         img{
         
    21             width:1000px;
    22             height:400px;
    23             float: left;
    24         }
    25         span{
         
    26             position: absolute;
    27             width:50px;
    28             height:50px;
    29             line-height: 46px;
    30             font-size: 36px;
    31             color:blanchedalmond;
    32             background: rgba(0,255,0,.6);
    33             top:175px;
    34             text-align: center;
    35             border-radius:40px;
    36             cursor: pointer;
    37         }
    38         span:nth-of-type(1){
         
    39             left:10px;
    40         }
    41         span:nth-of-type(2){
         
    42             right:10px;
    43         }
    44         article{
         
    45             position: absolute;
    46             z-index: 1;
    47             width:1000px;
    48             bottom:20px;
    49             display: flex;
    50             justify-content: center;
    51         }
    52         p{
         
    53             height:20px;
    54             width:20px;
    55             border-radius:10px;
    56             background:  rgba(0,0,255,.6);
    57             margin:0 10px;
    58             cursor: pointer;
    59         }
    60         .active{
         
    61             background: red;
    62         }
    63     </style>
    64 </head>
    65 <body>
    66     <section>
    67         <div>
    68             <img src="images/1.jpg" alt="">
    69             <img src="images/2.jpg" alt="">
    70             <img src="images/3.jpg" alt="">
    71             <img src="images/4.jpg" alt="">
    72             <img src="images/5.jpg" alt="">
    73         </div>
    74         <span><</span>
    75         <span>></span>
    76         <article></article>
    77     </section>
    78 </body>
    79 </html>
    80 <script src = "move.js"></script>
    81 <script src = "num2.js"></script>

move.js为一个封装的缓冲运动的小插件，代码详见：[https://www.cnblogs.com/XieYFwin/p/10853160.html][https_www.cnblogs.com_XieYFwin_p_10853160.html]

以下为num2.js代码（面向对象思想）：

1 function lunbo(){
      2     this.sec = document.querySelector("section");
      3     this.spans = this.sec.querySelectorAll("span");
      4     this.div = this.sec.querySelector("div");
      5     this.article =  this.sec.querySelector("article");
      6     this.imgs = this.div.querySelectorAll("img");
      7     this.count = 0;    //添加一个计数器
      8     this.timer = null; //添加一个计时器
      9     this.create(); 
     10     this.ps =  this.article.querySelectorAll("p");
     11     this.init();
     12 }
     13 lunbo.prototype = {
     14     init : function(){        //整合功能
     15         //复制第一张图片，加入div
     16         var img1 = this.imgs[0].cloneNode();
     17         this.div.appendChild(img1);
     18         //给div动态添加宽度
     19         this.div.style.width = ( this.imgs.length + 1 ) * this.imgs[0].offsetWidth + "px";
     20         //动态添加小圆点
     21         
     22         //调用所有的事件
     23         this.bindEvent();           
     24     },
     25     create : function(){            //动态添加小圆点
     26         for(var i = 0, j = this.imgs.length  ;i < j; i++){
     27             var p = document.createElement("p");
     28             if(i == 0){
     29                 p.className = "active";
     30             }
     31             this.article.appendChild(p);
     32         }
     33     }, 
     34     clearActive : function(){        //清除小圆点类名
     35         for(var i = 0, j = this.ps.length;i < j; i++){
     36             this.ps[i].className = "";
     37         }
     38     },
     39     addActive : function(num){        //小圆点划过增加类名
     40         this.ps[num].className = "active";
     41     },
     42     nextImg : function(){
     43         move(this.div,{'left': - this.count * this.imgs[0].offsetWidth })
     44     },
     45     preImg: function(){
     46         move(this.div,{'left':  - this.count * this.imgs[0].offsetWidth })
     47     },
     48     bindEvent : function(){     //添加所有的事件 
     49         var _this = this;
     50         this.spans[1].onclick = function(){       //第二个span绑定单击事件
     51             if(_this.count == _this.imgs.length ){
     52                 _this.div.style.left = 0; 
     53             }
     54             _this.count = _this.count >  _this.imgs.length - 1 ? 1 : ++_this.count;
     55             
     56             _this.nextImg();
     57             _this.clearActive();
     58             _this.addActive(_this.count % (_this.imgs.length ));
     59         }
     60         this.spans[0].onclick = function(){      //第一个span绑定单击事件
     61             if(_this.count == 0 ){
     62                 _this.div.style.left = -  (_this.imgs.length ) * _this.imgs[0].offsetWidth + 'px'; 
     63             }
     64             _this.count = _this.count <=  0 ? _this.imgs.length - 1 : --_this.count ;
     65             _this.preImg();
     66             _this.clearActive();
     67             _this.addActive(_this.count % (_this.imgs.length ));
     68         };
     69         for(let k = 0, m = this.ps.length;k < m; k++){
     70             this.ps[k].onmouseover = function(){
     71                 _this.clearActive();
     72                 _this.addActive(k);
     73                 _this.count = k;
     74                 _this.nextImg();
     75             }
     76         }
     77         this.timer = setInterval(function(){        //定时器轮播
     78             if(_this.count == _this.imgs.length ){
     79                 _this.div.style.left = 0; 
     80             }
     81             _this.count = _this.count >  _this.imgs.length - 1  ? 1 : ++_this.count;
     82         
     83             _this.nextImg();
     84             _this.clearActive();
     85             _this.addActive(_this.count % (_this.imgs.length ));
     86         },1000)
     87         this.sec.onmouseover = function(){
     88             clearInterval(_this.timer);
     89         };
     90         this.sec.onmouseout = function(){
     91             clearInterval(_this.timer);
     92             _this.timer = setInterval(function(){        //定时器轮播
     93                 if(_this.count == _this.imgs.length ){
     94                     _this.div.style.left = 0; 
     95                 }
     96                 _this.count = _this.count >  _this.imgs.length - 1  ? 1 : ++_this.count;
     97             
     98                 _this.nextImg();
     99                 _this.clearActive();
    100                 _this.addActive(_this.count % (_this.imgs.length ));
    101             },2000)
    102         };
    103     },
    104 }
    105 new lunbo();

转载于:https://www.cnblogs.com/XieYFwin/p/10853188.html

[https_www.cnblogs.com_XieYFwin_p_10853160.html]: https://www.cnblogs.com/XieYFwin/p/10853160.html