说明:此轮播图使用原生js实现,支持无缝轮播,拖拽切换、点击指示点切换;
html及使用案例
<div class="swiper-box" id='swiper1'></div>
<button class="btn pre">上一张</button>
<button class="btn next">下一张</button>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//实例1
new mySwiper({
el: '#swiper1',//
imgs: ['./img/1.png','./img/2.png','./img/3.png','./img/4.png'],//轮播图图片地址数组
preBtn: '.pre',//上一页
nextBtn: '.next',//下一页
point: true,//是否创建指示点
delayed: 5000//自动轮播毫秒,不传默认为3000
})
</script>
js封装
function mySwiper(configObj) {
var _this = this;
var el = configObj.el;
var imgs = configObj.imgs;
var sw = document.querySelector(el); //轮播图可视窗口
this.sCon = null; //可移动主体
var sItems = null;
var point = configObj.point || false;
var swPionts = null; //指示点盒子
var curIndex = 1; //当前显示下标
var running = false; //防止快速点击
var setMoveSize = 190;//拖拽切换的最小像素
var swWidth = 0, //轮播图窗口宽度,通过计算
delayed = configObj.delayed || 3000,//自动轮播毫秒
timer1 = null,//第一张变最后一张时用于清除动画
timer2 = null,//最后一张变第一张时用于清除动画
timer3 = null,//用于禁止快速点击
resizeTimer = null, //用于解决浏览器窗口变化多次重复执行代码
runTimer = null,//用于自动轮播
move