原生js + css3 + 定時器無縫輪播圖（部分）

IamDLY 發布于2019-08-23 15:21 / 1070人閱讀

摘要：起因現在自學前端中，學到移動端，在做一個項目，課程開始用原生的方法寫輪播圖無縫，但是視頻講的是面向過程的方式，現在自己用面向對象的方式寫一下。

## 起因 ##

現在自學前端中，學到移動端，在做一個項目，課程開始用原生的方法寫輪播圖（無縫），但是視頻講的是面向過程的方式，現在自己用面向對象的方式寫一下。

## 上代碼 ##

html的代碼

css##代碼

.jd_nav{
    width: 100%;
    background-color: #fff;
    border-bottom:1px solid #ccc;

}
.jd_nav ul{
    padding-top: 10px;
    width: 100%;
    padding-bottom: 10px;
}
.jd_nav ul li{
    width: 25%;
    float: left;
}
.jd_nav ul li a{
    display: block;
    width: 100%;
}
.jd_nav ul li a img{
    display: block;
    width: 40px;
    height: 40px;
    margin:0 auto;
}
.jd_nav ul li a p{
    text-align: center;
    font-size: 12px;
    padding:5px 0;
}

js代碼

window.onload = function () {
   let bn = new Banner();
  bn.init();
}

  let Banner= function () {
   /*自定義索引*/ 
   this.index = 1;
   /*獲取輪播圖的大容器*/
   this.banner = document.querySelector(".jd_banner");
   /*獲取容器的寬度*/
   this.width = this.banner.offsetWidth;
   /*獲取相框容器*/
   this.imageBox = this.banner.querySelector("ul:first-child");

}

/*在原型上添加一個初始化的方法*/
Banner.prototype.init = function () {
       this.times();    
};
/*在原型上添加一個添加 transition 方法*/
Banner.prototype.addTransition= function () {
     this.imageBox.style.transition = "transform 0.2s";
     this.imageBox.style.webkitTransition = "all 0.2s";
   
};
/*在原型上添加一個 移除transition 方法*/
Banner.prototype.removeTransition = function () {
     console.log("remove");
     this.imageBox.style.transition = "none";
     this.imageBox.style.webkitTransition = "none";
     
};
/*在原型上添加一個設置 translate 方法*/
Banner.prototype.setTranslate = function (translatex) {
      console.log("set");
     this.imageBox.style.transform = "translateX("+translatex+"px)";
     this.imageBox.style.webkitTransform = "translateX("+translatex+"px)";   
};
/*在原型上添加一個times 方法，里面主要是包含自動播放和判斷最后一張圖片和第一張圖片*/
Banner.prototype.times= function(){
      var _this = this;
      setInterval(function () {
        _this.index++;
        _this.addTransition();
        _this.setTranslate(-_this.index*_this.width);
      } , 1000);
      /*需要等最后一張結束去判斷 是否瞬間定位到第一張*/
   _this.imageBox.addEventListener("transitionend" , function (){
       if(_this.index >= 9){
        // console.log(index);
        /*瞬間過渡*/
        _this.index = 1;
        /*清過渡*/
        _this.removeTransition();
        /*做位移*/ 
       _this.setTranslate(-_this.index*_this.width)
       }else if (_this.index <= 0) {
        /*滑動的時候也要無縫*/
        /*瞬間過渡*/
        _this.index = 8;
        /*清過渡*/
        _this.removeTransition();
        /*做位移*/ 
        _this.setTranslate(-_this.index*_this.width);
       }
   })
};

感受

學了javascript差不過過了半年了，但是對于一些知識點還是有點忘記了，比如面向對象方面的知識點，但是比起沒有學過javascript,好了很多了，可以查一下資料就可以明白。

對于把面向過程改成面向對象，我一邊查資料，一邊改，但是還是把定時器方面的this指向忘記了，通過查找網上的輪播圖面向對象的文章，明白了定時器this指向的問題了，至于為什么times 方法中 imageBox.addEventListener 這里，我用面向過程的方式來調試的時候，this指向是ul，當時用面向對象的方式，this的指向就是定義的Banner。

感覺學了很多知識，但是現在還沒有出來從事這一行，希望能在盡早踏出這一步。

以后沒學到一些知識都記錄一下，提高自己的寫作水平。

如有什么問題，望各位指出。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101907.html

幾種原生js輪播圖

摘要：由于各種各樣的原因比如說懶，本文直接在代碼里面用注釋序號記錄實現的思路普通版原理一個包含多張圖片的其中所有的左浮動成一排，實際過程就是將往左右邊移動，改變值。由于各種各樣的原因（比如說懶），本文直接在代碼里面用注釋+序號記錄實現的思路 1.普通版原理：一個包含多張圖片的ul,其中所有的li左浮動成一排，實際過程就是將ul往左（右）邊移動，改變left值。效果圖：實際應用的時候.s...

CollinPeng 2019-08-01 17:32 評論0 收藏0
幾種原生js輪播圖

摘要：由于各種各樣的原因比如說懶，本文直接在代碼里面用注釋序號記錄實現的思路普通版原理一個包含多張圖片的其中所有的左浮動成一排，實際過程就是將往左右邊移動，改變值。由于各種各樣的原因（比如說懶），本文直接在代碼里面用注釋+序號記錄實現的思路 1.普通版原理：一個包含多張圖片的ul,其中所有的li左浮動成一排，實際過程就是將ul往左（右）邊移動，改變left值。效果圖：實際應用的時候.s...

Jenny_Tong 2019-08-21 16:17 評論0 收藏0
幾種原生js輪播圖

摘要：由于各種各樣的原因比如說懶，本文直接在代碼里面用注釋序號記錄實現的思路普通版原理一個包含多張圖片的其中所有的左浮動成一排，實際過程就是將往左右邊移動，改變值。由于各種各樣的原因（比如說懶），本文直接在代碼里面用注釋+序號記錄實現的思路 1.普通版原理：一個包含多張圖片的ul,其中所有的li左浮動成一排，實際過程就是將ul往左（右）邊移動，改變left值。效果圖：實際應用的時候.s...

cod7ce 2019-08-29 13:21 評論0 收藏0
javascript簡單輪播圖

摘要：輪播圖實現原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動用定時器改變元素的值讓圖片呈現左右滾動的效果。 **輪播圖實現原理：通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動用定時器改變元素的left值讓圖片呈現左右滾動的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

lk20150415 2019-08-02 15:58 評論0 收藏0
javascript簡單輪播圖

摘要：輪播圖實現原理通過多張圖片平鋪，用只顯示一張圖片其他的隱藏，無縫滾動用定時器改變元素的值讓圖片呈現左右滾動的效果。 **輪播圖實現原理：通過多張圖片平鋪，用overflow:hidden只顯示一張圖片、其他的隱藏，無縫滾動用定時器改變元素的left值讓圖片呈現左右滾動的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

peixn 2019-08-21 17:48 評論0 收藏0