原生js封装适应PC+移动端的可复用轮播

利用原生JS封装一个支持多端可复用轮播

本轮播利用原生JS封装一个支持多端可复用的轮播插件，支持自动播放，滑动效果，指点索引，控制按钮，切换使用CSS3模拟滑动效果，喜欢的朋友可以参考使用，意见反馈QQ1367478101

1.模板调用

1.1、基本模板调用

<div class="reai-swiper" autoplay="3000"  indicator-dots="true" index="0" control="true" vertical="false" >
			<div class="swiper-item">1</div>
			<div class="swiper-item">2</div>
			<div class="swiper-item">3</div>
			<div class="swiper-item" >4</div>
			<div class="swiper-item" >5</div>
			<div class="swiper-item">6</div>
			...
		</div>	

1.2、配置参数

属性值	说明
swiper-touch	在class中使用,表示移动端开启滑动效果
autoplay	参数值为数值型、单位ms
indicator-dots	默认为false,表示是否显示面板指示点 ，开启请设置true
index	表示默认索引值
control	是否开启左右控制按钮，默认false，适用于pc端.在适用滑动时，移动端无效.开启请设置true
vertical	表示改为纵向切换,默认false，使用此参数时，若开启滑动，表示纵向滑动切换，开启请设置true

注意：调用轮播必须需要一个外层盒子给它宽高，这样有助于我们在指定位置使用该轮播

2.CSS代码

      #app{width: 100%;margin:0 auto;height:160px;max-width:600px;  -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);  box-shadow: 0 0 4px rgba(0,0,0,0.4);border-radius: 5px;overflow: hidden; position: relative;margin-top: 50px;}
      .reai-swiper{width: 100%;height: 100%;position: relative;overflow: hidden;color: #fff;-webkit-tap-highlight-color: rgba(240,240,240,0);lighting-color:rgba(0,0,0,0)}
        .reai-swiper .swiper-item{position: absolute;width: 100%;height: 100%;top: 0;display: none;}
             .swiper-control-left,.swiper-control-right{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; position: absolute;height: 32px;width: 32px;top: 50%;margin-top: -16px;font-size:18px;background: rgba(0,0,0,0.25); line-height: 32px;cursor: pointer; text-align: center; color:rgba(255,255,255,0.8); z-index: 10;border-radius: 50%;}
      .swiper-control-left:hover,.swiper-control-right:hover{background: rgba(0,0,0,0.45);}
      .swiper-control-left{left:16px;}
      .swiper-control-right{right: 16px;}
      .swiper-dots-box{height:30px;position: absolute;bottom: 0px;z-index: 10;text-align:center;width: 100%;line-height: 30px;}
      .swiper-dots-box ul{display: inline-block;padding:5px 10px;margin: 0;line-height: 26px;background:rgba(0,0,0,.2);border-radius: 18px;}
      .swiper-dots-box ul li{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;float: left; height: 12px;width: 12px;border-radius:50%;background:rgba(255,255,255,0.6);cursor: pointer;list-style: none;margin-right: 6px;}
      .swiper-dots-box ul li:last-child{margin-right: 0;}
      .dots-this{background: rgba(255,255,255,1)!important;}
      .swiper-this{z-index: 10;display: block!important;left: 0;}
      .swiper-nowPre{-webkit-animation:nowLeft .4s;animation:nowLeft .4s;}
      .swiper-nowNext{-webkit-animation: nowRight .4s;animation: nowRight .4s;}
      .swiper-pre{-webkit-animation:moveLeft .4s;animation:moveLeft .4s;}
      .swiper-next{-webkit-animation: moveRight .4s;animation: moveRight .4s;}
      .swiper-vertical .swiper-dots-box{height: 100%;width: 22px;right: 10px;bottom: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
      .swiper-vertical .swiper-dots-box ul{margin: auto;padding: 10px 5px}
      .swiper-vertical .swiper-dots-box ul li{margin: auto;margin-bottom:5px}
      .swiper-vertical .swiper-dots-box ul li:last-child{margin-bottom: 0;}
      .swiper-vertical .swiper-control-left{top: 16px;margin: 0;left: 50%;margin-left: -20px}
      .swiper-vertical .swiper-control-right{bottom: 16px;top: auto;  margin: 0;left: 50%;margin-left: -20px}
      .swiper-vertical .swiper-nowPre{-webkit-animation:nowTop .4s;animation:nowTop .4s;}
      .swiper-vertical .swiper-nowNext{-webkit-animation: nowBottom .4s;animation: nowBottom .4s;}
      .swiper-vertical .swiper-pre{-webkit-animation:moveTop .4s;animation:moveTop .4s;}
      .swiper-vertical .swiper-next{-webkit-animation: moveBottom .4s;animation: moveBottom .4s;}
      /*平板和手机*/
      @media (max-width: 48rem) {
      .swiper-touch .swiper-control-left,.swiper-touch .swiper-control-right{display: none}
      .swiper-touch .swiper-dots-box{bottom:0;}
      .swiper-touch .swiper-dots-box ul{background: none;padding:0}
      .swiper-touch .swiper-dots-box ul li{height: 4px;width: 16px;border-radius: 0}
    }
       @-webkit-keyframes nowLeft{from{left:0;}to{left:100%;}}
       @keyframes nowLeft{from{left:0;}to{left:100%;}}
       @-webkit-keyframes nowRight{from{left:0;}to{left: -100%;}}
       @keyframes nowRight{from{left:0;}to{left: -100%;}}
       @-webkit-keyframes moveLeft{from{left: -100%;}to{left: 0;}}
       @keyframes moveLeft{from{left: -100%;}to{left: 0;}}
       @-webkit-keyframes moveRight{from{left: 100%;}to{left: 0;}}
       @keyframes moveRight{from{left: 100%;}to{left: 0;}}
       @-webkit-keyframes nowTop{from{top:0;}to{top:100%;}}
       @keyframes nowTop{from{top:0;}to{top:100%;}}
       @-webkit-keyframes nowBottom{from{top:0;}to{top:-100%;}}
       @keyframes nowBottom{from{top:0;}to{top:-100%;}}
       @-webkit-keyframes moveTop{from{top: -100%;}to{top: 0;}}
       @keyframes moveTop{from{top: -100%;}to{top: 0;}}
       @-webkit-keyframes moveBottom{from{top: 100%;}to{top: 0;}}
       @keyframes moveBottom{from{top: 100%;}to{top: 0;}}

3.JS代码

"use strict";

function swiper() {
  this.getObj();
}

swiper.prototype = {
  init: function init(obj) {
    obj.item[obj.itemIndex].classList.add("swiper-this");

    if (obj.data.autoplay) {
      this.autoplay(obj, parseInt(obj.data.autoplay));
    } //自动播放


    if (obj.data.vertical === "true") {
      //开启纵向
      obj.airObj.classList.add("swiper-vertical");
      if (obj.control.left != null && obj.control.right != null) {
        obj.control.left.className = "swiper-control-left reai-ico reai-ico-up";
        obj.control.right.className = "swiper-control-right reai-ico reai-ico-down";
      }
    }

    this.changeDots(obj);
    this.control(obj);

    if (obj.airObj.classList.contains('swiper-touch')) {
      this.touch(obj);
    }
  },
  getObj: function getObj() {
    this.air = [];
    var swiper = document.querySelectorAll(".reai-swiper");

    for (var z = 0; z < swiper.length; z++) {
      var obj = {};
      obj.airObj = swiper[z];
      obj.item = swiper[z].querySelectorAll(".swiper-item");
      obj.data = {};
      obj.dots = [];

      for (var i = 0; i < swiper[z].attributes.length; i++) {
        obj.data[swiper[z].attributes[i].name] = swiper[z].attributes[i].value;
      }

      obj.itemIndex = obj.data.index == null ? 0 : parseInt(obj.data.index);

      if (obj.data['indicator-dots'] == 'true') {
        this.addDots(obj);
      } //增加dots


      obj.control = {};

      if (obj.data['control'] == "true") {
        var divLeft = document.createElement("div");
        divLeft.className = "swiper-control-left reai-ico reai-ico-left";
        var divRight = document.createElement("div");
        divRight.className = "swiper-control-right reai-ico reai-ico-right";
        obj.control.left = divLeft;
        obj.control.right = divRight;
        swiper[z].appendChild(divRight);
        swiper[z].appendChild(divLeft);
      }

      this.air.push(obj);
      this.init(obj);
    }
  },
  autoplay: function autoplay(obj) {
    var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4000;

    var _this = this;

    obj.timer = setInterval(function () {
      _this.toright(obj);
    }, time);
  },
  control: function control(obj) {
    var _this = this;

    if (obj.control.left != null && obj.control.right != null) {
      obj.control.left.addEventListener('click', function (e) {
        e.stopPropagation();
       console.log(obj)
        if (!obj.leftStatus) {
          _this.toleft(obj);
        }

        _this.runTimer(obj);
      }, false);
      obj.control.right.addEventListener('click', function (e) {
        e.stopPropagation();

        if (!obj.rightStatus) {
          _this.toright(obj);
        }

        _this.runTimer(obj);
      }, false);
    }
  },
  toright: function toright(obj) {
    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
    obj.rightStatus = true;
    var _this = this;
    var nowIndex = index === "" ? (obj.itemIndex + 1) % obj.item.length : index;
    obj.item[obj.itemIndex].classList.add("swiper-nowNext");
    obj.item[nowIndex].className = "swiper-item swiper-this swiper-next";
    setTimeout(function () {
      obj.item[obj.itemIndex].className = "swiper-item";
      obj.itemIndex = nowIndex;
      obj.item[obj.itemIndex].className = "swiper-item swiper-this";
      obj.rightStatus = false;
      _this.changeDots(obj);
      console.log(obj.itemIndex)
    }, 300);

  },
  toleft: function toleft(obj) {
    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
    obj.leftStatus = true;
    var _this = this;
    obj.item[obj.itemIndex].classList.add("swiper-nowPre");
    var nowIndex = index === "" ? obj.itemIndex - 1 < 0 ? obj.item.length - 1 : obj.itemIndex - 1 : index;
    obj.item[nowIndex].className = "swiper-item swiper-this swiper-pre";
    setTimeout(function () {
      obj.item[obj.itemIndex].className = "swiper-item";
      obj.itemIndex = nowIndex;
      obj.item[obj.itemIndex].className = "swiper-item swiper-this";
      obj.leftStatus = false;

      _this.changeDots(obj);
    }, 300);
  },
  addDots: function addDots(obj) {
    var _this = this;

    var div = document.createElement("div");
    div.className = "swiper-dots-box";
    var ul = document.createElement("ul");

    for (var i = 0; i < obj.item.length; i++) {
      var li = document.createElement("li");
      ul.appendChild(li);
      li.index = i;
      obj.dots.push(li);
      li.addEventListener('click', function (e) {
        e.stopPropagation();

        if (this.index > obj.itemIndex) {
          _this.toright(obj, this.index);
        } else if (this.index < obj.itemIndex) {
          _this.toleft(obj, this.index);
        }

        _this.runTimer(obj);
      }, false);
    }

    div.appendChild(ul);
    obj.airObj.appendChild(div);
  },
  changeDots: function changeDots(obj) {
    if (!obj.leftStatus && !obj.rightStatus) {
      for (var i = 0; i < obj.dots.length; i++) {
        obj.dots[i].className = "";
      }

      if (obj.dots.length > 0) obj.dots[obj.itemIndex].className = "dots-this";
    }
  },
  runTimer: function runTimer(obj) {
    if (obj.data.autoplay) {
      clearTimeout(obj.timer);
      this.autoplay(obj, parseInt(obj.data.autoplay));
    } //自动播放

  },
  touch: function touch(obj) {
    var _this = this;
    var now, move, moveSize, lastIndex, moveDir;
    if (obj.data["vertical"] == "true") {
      obj.touchDir = "top";
    } else {
      obj.touchDir = "left";
    }

    obj.airObj.addEventListener('touchstart', function (e) {
      now = {};
      move = {};
      now = getCoord(e);
      clearInterval(obj.timer);
      now.boxSize = getSize(this);
    
    }, false);
    obj.airObj.addEventListener('touchmove', function (e) {
      var doing = getCoord(e);
      move = {
        x: (doing.x - now.x) / now.boxSize.width,
        y: (doing.y - now.y) / now.boxSize.height,
        time: doing.timeStamp - now.timeStamp
      };

      if (obj.data["vertical"] == "true") {
        moveDir = move.y;
      } else {
        moveDir = move.x;
      }

      if (Math.abs(moveDir) > 0.05) {
        toMove(moveDir, obj.touchDir);
      }
    }, false);
    obj.airObj.addEventListener('touchend', function (e) {
      lastIndex = obj.itemIndex;
      if (Math.abs(moveDir) > 0.5) {
        if (moveDir < 0) {
          toMove(-1, obj.touchDir);
          obj.itemIndex = (obj.itemIndex + 1) % obj.item.length;
        } else {
          toMove(1, obj.touchDir);
          obj.itemIndex = (obj.itemIndex - 1 < 0 ? obj.item.length - 1 : obj.itemIndex - 1) % obj.item.length;
        }

        _this.changeDots(obj);
      } else {
        toMove(0, obj.touchDir, moveDir);
      }
      _this.autoplay(obj);
      clearStyle(obj, lastIndex);
       moveDir=0;
    }, false);

    function getCoord(obj) {
      var e = obj.changedTouches[0];
      return {
        y: e.pageY || e.clientY,
        x: e.pageX || e.clientX,
        timeStamp: obj.timeStamp
      };
    }

    function getSize(obj) {
      return {
        width: obj.offsetWidth || obj.clientWidth,
        height: obj.offsetHeight || obj.clientHeight
      };
    }

    function toMove(step) {
      moveSize = Math.abs(step) > 1 ? 1 : Math.abs(step);
      console.log(arguments[1])
     if (step == 1 || step == -1 || step == 0) {
        obj.item[obj.itemIndex].style.transition = arguments[1] + " .2s";
        obj.item[(obj.itemIndex + 1) % obj.item.length].style.transition = arguments[1] + " .2s";
        obj.item[obj.itemIndex - 1 < 0 ? obj.item.length - 1 : obj.itemIndex - 1].style.transition = arguments[1] + " .2s";
      }

      if (step < 0 || parseInt(arguments[2]) == 0) {
        obj.item[obj.itemIndex].style[arguments[1]] = -moveSize * 100 + "%";
        obj.item[(obj.itemIndex + 1) % obj.item.length].style[arguments[1]] = -moveSize * 100 + 100 + "%";
        obj.item[(obj.itemIndex + 1) % obj.item.length].style.display = "block";
      } else if (step > 0 || parseInt(arguments[2]) == -0) {
        obj.item[obj.itemIndex].style[arguments[1]] = moveSize * 100 + "%";
        obj.item[obj.itemIndex - 1 < 0 ? obj.item.length - 1 : obj.itemIndex - 1].style[arguments[1]] = moveSize * 100 - 100 + "%";
        obj.item[obj.itemIndex - 1 < 0 ? obj.item.length - 1 : obj.itemIndex - 1].style.display = "block";
      }
    }

    function clearStyle(obj, last) {
      setTimeout(function () {
        for (var i = 0; i < obj.item.length; i++) {
          obj.item[i].style[obj.touchDir] = null;
          obj.item[i].style.display = null;
          obj.item[i].style.transition = null;
        }
        obj.item[last].classList.remove("swiper-this");
        obj.item[obj.itemIndex].classList.add("swiper-this");
      }, 300);
    }
  }
};
    new swiper()

4.效果预览