原生js + css3 + 定时器无缝轮播图（部分）

IamDLY 发布于2019-08-23 15:21 / 951人阅读

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

## 起因 ##

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

## 上代码 ##

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。

感觉学了很多知识，但是现在还没有出来从事这一行，希望能在尽早踏出这一步。

以后没学到一些知识都记录一下，提高自己的写作水平。

如有什么问题，望各位指出。

私有云专线服务 js无缝轮播 js轮播图视频 js焦点轮播图轮播图鼠标悬浮js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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