## 起因 ##

现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图（无缝），但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。

## 上代码 ##

• 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。
• 感觉学了很多知识，但是现在还没有出来从事这一行，希望能在尽早踏出这一步。
• 以后没学到一些知识都记录一下，提高自己的写作水平。
• 如有什么问题，望各位指出。