## 原由 ##

如今自学前端中，学到挪动端，在做一个项目，课程最先用原生的要领写轮播图（无缝），然则视频讲的是面向历程的体式格局，如今本身用面向对象的体式格局写一下。

## 上代码 ##

• html的代码

<div class="jd_nav">
      <ul class="clearfix">
        <li><a href="#"><img src="images/nav0.png" alt=""><p>分类</p></a></li>
        <li><a href="#"><img src="images/nav1.png" alt=""><p>分类</p></a></li>
        <li><a href="#"><img src="images/nav2.png" alt=""><p>分类</p></a></li>
        <li><a href="#"><img src="images/nav3.png" alt=""><p>分类</p></a></li>
        <li><a href="#"><img src="images/nav4.png" alt=""><p>分类</p></a></li>
        <li><a href="#"><img src="images/nav5.png" alt=""><p>分类</p></a></li>
        <li><a href="#"><img src="images/nav6.png" alt=""><p>分类</p></a></li>
        <li><a href="#"><img src="images/nav7.png" alt=""><p>分类</p></a></li>
      </ul>
   </div>

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。
• 觉得学了许多学问，然则如今还没有出来处置这一行，愿望能在尽早踏出这一步。
• 今后没学到一些学问都纪录一下，进步本身的写作水平。
• 若有什么问题，望列位指出。

  
  
  
  
  
  
</div>