优势：基于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",
})
}这是一个完整的轮播图，懒的同学可以直接拷贝，亲测写多个，兼容完全没问题 放心用就好啦