jquery版本轮播图（es5版本，兼容高）

优势：基于es5，兼容高。切换动画css配置，轻量，不包含多余代码，可扩展性很高，多个轮播图不会冲突，可配置独有namespace

注：

1、项目需要所写，所以只写了页码的切换，未写上一页下一页按钮，不过js里面包含下一页代码，只需要config扩展一个切换上一页下一页按钮的class，照猫画虎写一个上一页的方法即可

2、提供了可配置当前激活项得class，默认active，这样可以根据项目需要进行配置，不至于限制死（一个页面多个轮播，即使全用active也没问题，因为内部做了space）

3、namespace只有new Swiper时候传入一个即可 内部使用任何相同的class都没问题

4、页码、轮播只能使用li（想要修改可以自己修改源码find(li)换成其余的）

下面放下swiper的源码：

var Swiper = function(bannerContine){
    this._loopTime = 3000;
    this._currentImgNum = 0;
    this._currentClass = "active";
    this._imgListLength = 0;
    this._bannerContine = bannerContine;
    this._timer = null;
    this._config = null;
    this._pageContine = null;
    this.setImgNumber = function(index){
      this._currentImgNum = index
    }
    // 设置index
    this.setNextImgNumber = function(){
        if(this._currentImgNum == this._imgListLength - 1){
            this.setImgNumber(0);
        }else{
            this.setImgNumber(this._currentImgNum + 1);
        }
    }
    // 翻页到指定number
    this.gotoImgByNum = function(index){
      this.setImgNumber(index);
      $(this._bannerContine).find("li").removeClass(this._currentClass)
                            .eq(index).addClass(this._currentClass);
      if(this._pageContine){
          $(this._pageContine).find("li").removeClass(this._currentClass)
                                         .eq(index).addClass(this._currentClass);
      }
    }
    // 下一页
    this.next = function(){
        this.setNextImgNumber();
        this.gotoImgByNum(this._currentImgNum);
    }
    // 开始轮播
    this.autoPlay = function(){
      var that = this;
      if(this._timer){
          clearTimeout(this._timer);
      }
      this._timer = setTimeout(function(){
          that.next();
          that.autoPlay();
      },that._loopTime)
    }
    // 重置轮播时间
    this.suspendPlay = function(){
        if(this._config.autoPlay && this._config.autoPlay.toString() == "true"){
            clearTimeout(this._timer);
            var that = this;
            setTimeout(function(){
              that.autoPlay();
            },0)
        }
    }
    this.stopPlay = function(){
        clearTimeout(this._timer);
    }
    // 启动器
    this.run = function(config){
      var that = this;
      this._imgListLength = $(this._namespace + " " + this._bannerContine).find("li").length;
      this._config = config;
      if(config.currentClass){
          this._currentClass = config.currentClass.toString();
      }
      if(config.startNum !== "" && config.startNum !== null && config.startNum !== undefined){
          this._currentImgNum = parseInt(config.startNum);
      }
      if(config.pageContine && config.pageContine != ""){
          this._pageContine = config.pageContine;
          $(this._pageContine).find("li").each(function(index){
              $(this).on("click",function(e){
                  e.stopPropagation();
                  that.gotoImgByNum(index);
                  that.suspendPlay();
              })
          })
      }
      this.gotoImgByNum(this._currentImgNum);
      if(config.delayTime){
          this._loopTime = parseInt(config.loopTime);
      }
      if(config.autoPlay && config.autoPlay.toString() == "true"){
          this.autoPlay();
      }

    }
  }

使用方法：

html：

<div class='cms_banner_container'>
            <ul class="banner_container_imgul">
              <li>
                <img src="https://preview.qiantucdn.com/58pic/28/60/74/52s58PICnbu97bbKkf6te_PIC2018.jpg!w1024_new_small" alt="">
              </li>
              <li>
                <img src="https://preview.qiantucdn.com/58pic/27/89/84/75058PICta44WaKcE2PNY_PIC2018.png!w1024_new_0" alt="">
              </li>
              <li>
                <img src="https://preview.qiantucdn.com/58pic/28/08/69/43y58PICrzW58PICr85358PIC58PICm658PIC_PIC2018.png!w1024_new_0" alt="">
              </li>
              <li>
                <img src="https://preview.qiantucdn.com/58pic/17/79/16/93358PIC9Av71d6Xwe7cc_PIC2018.jpg!w1024_new_small" alt="">
              </li>
            </ul>
            <ul class = "banner_pagination banner_pagination0">
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
            </ul>
        </div>

css:

* {
    margin:;
    padding:;
    list-style: none;
  }

.cms_banner_container{
    width:100%;
    height:100%;
    position: relative;;
}
/*
    图片列表的样式
*/
.banner_container_imgul{
    position: relative;
    width:100%;
    height:100%;
}
.banner_container_imgul li {
    position: absolute;
    top:;
    height:;
    width:100%;
    height:100%;
    opacity:;
    transition:all 1.5s ease-in-out 0s;   /* 常用的简写方式 */
}
.banner_container_imgul li.active{
    opacity:;
}

.banner_container_imgul li img{
    width:100%;
    height:100%
}
/*
    页码的样式
*/
.banner_pagination {
    position: absolute;
    z-index:;
    bottom:30px;
    left:50%;
    transform: translateX(-50%);
}
.banner_pagination li {
    display: inline-block;
    width:20px;
    height:20px;
    line-height: 20px;
    text-align: center;
    background:#000;
    border-radius: 50%;
    color:#fff;
    cursor: pointer;
}
.banner_pagination li.active{
    background:#fff;
    color:#000;
}

js

  window.onload = function(){
    // 传入一个节点的class或者id
    var swiper = new Swiper(".banner_container_imgul");
    // 执行run 传入config
    /**
     * config参数大全
     * @param {Boolean} autoPlay 是否开启自动循环 默认false 不开启不会注册loop函数
     * @param {Number} loopTime 自动循环时间 默认3000
     * @param {Number} startNum 起始图片
     * @param {String} currentClass 标记当前index的class（默认 active）注：会同时激活img li和page li
     * @param {String} pageContine 页码节点的class 如果不传不会注册页码的点击事件
     */

    swiper.run({
        autoPlay:true,
        loopTime:3000,
        pageContine:".banner_pagination",
    })
  }

这是一个完整的轮播图，懒的同学可以直接拷贝，亲测写多个，兼容完全没问题  放心用就好啦