前端 - 纯JS手撸轮播

代码没有技术含量，适合新手，老鸟忽略，有什么不足请指出。 前几天在网上看到一遍文章说前端轮播的，刚好没什么事，也好久没有撸代码了，心血来潮就写了一个轮播。

废话不多说，先看看效果

四张图片向前向后都可以无缝连接

第一步，渲染4张图片，处理好最前最后一张即可

思路： 图片位置在第1张，如果向左切换，在你触摸的时候，直接将第4张移到第1张前。 图片位置在第4张，如果向右切换，在你触摸的时候，直接将第1张移到第4张后。 正常切换直接偏移距离即可。 代码很简单，重要的是原理。

第二步，初始化设置

第三步，渲染

第四步，添加事件，并切换

根据触摸调整偏移。 当图片被拖动的距离超过屏幕30%，那么松手会自动切换到下一张或者上一张， 否则回弹。

_bind(){
    this.cont = this.elem.querySelector('.g-swiper__content');
    this.list = this.cont.querySelectorAll('.g-swiper-item');
    this.first = this.cont.querySelector('.g-swiper-item:first-child');
    this.last = this.cont.querySelector('.g-swiper-item:last-child');

    this.cont.addEventListener('touchstart', (e)=>{
        var touchs = e.changedTouches[0];
        this.startpoint = {x: touchs.pageX, y: touchs.pageY};
        this._stop();
    });
    this.cont.addEventListener('touchmove', (e)=>{
        this._touchmove(e);
    });
    this.cont.addEventListener('touchend', (e)=>{
        this._touchend(e);
        this._play();
    });
}
_touchmove(e){
    var touchs = e.changedTouches[0];
    this.movepoint = {x: touchs.pageX, y: touchs.pageY};

    var moveX = this.movepoint.x - this.startpoint.x;

    this._setFirstLast(moveX);
    this._touchDirec(moveX);
}
_touchend(e){
    var touchs = e.changedTouches[0];
    this.endpoint = {x: touchs.pageX, y: touchs.pageY};

    var moveX = this.endpoint.x - this.startpoint.x;
    var ismove = Math.abs(moveX) > this.width * 0.3 ? true : false;

    if (ismove) {
        if (moveX > 0) {
            this.prev();
        } else {
            this.next();
        }
    }
    this._transform();
}
// 跟手移动
_touchDirec(direction){
    if (this.index == 0) {
        this.transformX = 0;
    } else if (this.index == this.list.length - 1) {
        this.transformX = -this.index * this.width;
    }
    this.cont.style.transitionDuration = `0ms`;
    this.cont.style.transform = `translateX(${this.transformX + direction}px)`;
}
// 设置偏移
_transform(){
    this.cont.style.transform = `translateX(${this.transformX}px)`;
    this.cont.style.transitionDuration = `500ms`;
}

到这里基本完成轮播。

最后上全代码

最后有点时间实现了自动轮播。

class swiper{
      constructor(opts = {}){
          this.el = opts.el || null;
          this.urls = opts.urls || [];
          this.index = opts.index || 0;
          this.autoplay = opts.autoplay || false;
          this.autotime = opts.autotime || 3000;
          this.timer = null;
          this.width = document.body.clientWidth;
          this.transformX = -this.index * this.width;
          this.startpoint = this.movepoint = this.endpoint = [];
          if (this.el == '' || this.el == null || this.el == undefined) {
              throw('el is undefined');
          }
          this._init();
      }
      _init(){
          this._render();
          this._bind();
          this._transform();
          this._play();
      }
      _render(){
          var html = `<div class="g-swiper__content" style="width:${this.width}px">`;
          for (var url of this.urls) {
              html += `<div class="g-swiper-item"><img src="${url}"  style="width:${this.width}px"></div>`;
          }
          html += '</div>';
          this.elem = document.querySelector(this.el);
          this.elem.innerHTML = html;
      }
      _bind(){
          this.cont = this.elem.querySelector('.g-swiper__content');
          this.list = this.cont.querySelectorAll('.g-swiper-item');
          this.first = this.cont.querySelector('.g-swiper-item:first-child');
          this.last = this.cont.querySelector('.g-swiper-item:last-child');

          this.cont.addEventListener('touchstart', (e)=>{
              var touchs = e.changedTouches[0];
              this.startpoint = {x: touchs.pageX, y: touchs.pageY};
              this._stop();
          });
          this.cont.addEventListener('touchmove', (e)=>{
              this._touchmove(e);
          });
          this.cont.addEventListener('touchend', (e)=>{
              this._touchend(e);
              this._play();
          });
      }
      _play(){
          if (this.autoplay) {
              this.timer = setInterval(() => {
                  this.next();
              }, this.autotime);
          }
      }
      _stop(){
          if (this.autoplay) {
              this.timer && clearInterval(this.timer);
          }
      }
      _touchmove(e){
          var touchs = e.changedTouches[0];
          this.movepoint = {x: touchs.pageX, y: touchs.pageY};

          var moveX = this.movepoint.x - this.startpoint.x;

          this._setFirstLast(moveX);
          this._touchDirec(moveX);
      }
      _touchend(e){
          var touchs = e.changedTouches[0];
          this.endpoint = {x: touchs.pageX, y: touchs.pageY};

          var moveX = this.endpoint.x - this.startpoint.x;
          var ismove = Math.abs(moveX) > this.width * 0.3 ? true : false;

          if (ismove) {
              if (moveX > 0) {
                  this.prev();
              } else {
                  this.next();
              }
          }
          this._transform();
      }
      go(index){
          if (index < 0 || index >= this.urls.length) {
              return false;
          }
          var direction = this.index > index ? 1 : -1;
          this.index = index;
          this._setFirstLast(direction);
          setTimeout(()=>{
              this._go(index);
          })
      }
      _go(index){
          if (index < 0 || index >= this.urls.length) {
              return false;
          }
          this.index = index;
          this.transformX = -this.index * this.width;
          this._transform();
      }
      _setFirstLast(direction){
          var firstTransformX = '', lastTransformX = '';
          if (this.index == 0 && direction > 0) {
              lastTransformX = `translateX(${-this.list.length * this.width}px)`;
          } else if (this.index == this.list.length - 1 && direction < 0) {
              firstTransformX = `translateX(${this.list.length * this.width}px)`;
          }
          if (this.first) {
              this.first.style.transform = firstTransformX;
          }
          if (this.last) {
              this.last.style.transform = lastTransformX;
          }
      }
      _touchDirec(direction){
          if (this.index == 0) {
              this.transformX = 0;
          } else if (this.index == this.list.length - 1) {
              this.transformX = -this.index * this.width;
          }
          this.cont.style.transitionDuration = `0ms`;
          this.cont.style.transform = `translateX(${this.transformX + direction}px)`;
      }
      next(){
          this._setFirstLast(-1);
          this._touchDirec(-1);
          if (this.index == this.list.length - 1) {
              this.index = 0;
              this.transformX = -this.list.length * this.width;
          } else {
              this.index++;
              this.transformX = -this.index * this.width;
          }
          setTimeout(()=>{
              this._transform();
          })
      }
      prev(){
          this._setFirstLast(1);
          this._touchDirec(1);
          if (this.index == 0) {
              this.index = this.list.length - 1;
              this.transformX = this.width;
          } else {
              this.index--;
              this.transformX = -this.index * this.width;
          }
          setTimeout(()=>{
              this._transform();
          })
      }
      _transform(){
          this.cont.style.transform = `translateX(${this.transformX}px)`;
          this.cont.style.transitionDuration = `500ms`;
      }
  }