Today to share a function than the entire carousel view of plug-in, ado, directly on the plug-in
;(function($){
"use strict";
$.fn.extend({
banner:function(ops){
// cont代指执行此方法的dom元素，此处指的是banner
var cont = this;
// 1.默认参数的处理
ops.list = ops.list === false ? false : true;
ops.autoPlay = ops.autoPlay === false ? false : true;
ops.delayTime = ops.delayTime || 2000;
ops.moveTime = ops.moveTime || 200;
// 2.面向对象解决轮播图功能
class Imgmove{
constructor(ops){
// 2.1通过接受参数来获取需要的属性
this.child = ops.img;
this.left = ops.left;
this.right = ops.right;
this.list = ops.list;
this.delayTime = ops.delayTime;
this.autoPlay = ops.autoPlay;
this.moveTime = ops.moveTime;
// 2.2提前设置图片进来和出去的索引
this.iNow = 0;
this.iPrev = ops.img.length - 1;
this.addEvent();
// 7.判断是否需要创建list
if(this.list){
this.createList();
}
// 12.判断是否需要自动播放
if(this.autoPlay){
this.autoPlayStart();
}
}
// 3.事件添加
addEvent(){
var that = this;
// 3.1 判断左右按钮是否存在，存在即可获取功能
if(
this.left!==undefined
&&this.left.length>0
&&this.right!==undefined
&&this.right.length>0
){
// 3.2根据给左右按钮不同的传参,方便在执行改变索引方法时分辨出是点击左还是右按钮
this.left.on("click",function(){
that.changeIndex(-1);
});
this.right.on("click",function(){
that.changeIndex(1);
})
}
// 9.准备list的改变索引(点击list中的span直接跳转到指定图片)
// 9.1通过事件委托来绑定执行方法
cont.on("click",".list span",function(){
that.listChangeIndex(this);
})
}
// 4.改变索引方法
changeIndex(direct){
// 4.1根据参数判断左右按钮,然后判断需要走和需要进来的索引
if(direct == -1){
// 4.2.1如果当前在第一张图片，需要进来最后一张，走掉第一张;否则进来的是当前索引的上一个，走掉的是进来的索引+1
if(this.iNow == 0){
this.iNow = this.child.length-1;
this.iPrev = 0;
}else{
this.iNow--;
this.iPrev = this.iNow + 1;
}
}else{
// 4.2.1如果当前在最后一张图片，需要进来0，走掉最后一张;否则进来的是当前索引的下一个，走掉的是进来的索引-1
if(this.iNow == this.child.length-1){
this.iNow = 0;
this.iPrev = this.child.length - 1;
}else{
this.iNow++;
this.iPrev = this.iNow - 1;
}
}
// 5.准备移动图片
this.move(direct);
}
// 6.移动图片stop()为了在执行动画之前先清除之前的动画，防止出现多个动画队列
move(direct){
this.child.eq(this.iPrev).css({
left:0
}).stop().animate({
left:-this.child.eq(0).width() * direct
},this.moveTime).end().eq(this.iNow).css({
left:this.child.eq(0).width() * direct
}).stop().animate({
left:0
},this.moveTime)
// 8.1动画移动完后要执行setActive();
this.setActive();
}
// 7.1创建list方法
createList(){
// 7.2准备个空字符用来准备字符串拼接
var str = ``;
// 7.3遍历图片的个数,然后给list中添加span
for(var i=0;i<this.child.length;i++){
str += `<span index='${i}'>${i+1}</span>`;
}
// 7.4给整个大框cont中添加list
$(`<div class='list'>${str}</div>`).appendTo(cont);
// 7.5准备渲染list
this.setActive();
}
// 8.渲染list,（此时页面进来的图片的索引）
setActive(){
cont.find(".list").children("span").eq(this.iNow).addClass("active").siblings().removeClass("active");
}
// 10.list改变索引方法
listChangeIndex(tar){
// 10.1通过点击的span的索引和当前图片索引做比较,决定移动
if($(tar).index() > this.iNow){
this.listMove(1,$(tar).index());
}
if($(tar).index() < this.iNow){
this.listMove(-1,$(tar).index());
}
// 10.2让点击的span所对应的索引
this.iNow = $(tar).index();
this.setActive();
}
// 11.图片跟随list点击的span的索引
listMove(direct,index){
this.child.eq(this.iNow).css({
left:0
}).stop().animate({
left:-this.child.eq(0).width() * direct
},this.moveTime).end().eq(index).css({
left:this.child.eq(0).width() * direct
}).stop().animate({
left:0
},this.moveTime)
}
// 12.1创建自动播放功能
autoPlayStart(){
// 12.2执行前,先清除上一次的计时器(默认自动右播放)
clearInterval(t);
var t = setInterval(()=>{
this.changeIndex(1);
},this.delayTime);
// 12.3当我们鼠标停留在banner上时,图片应保持不动(需要清除计时器)，再次离开banner时，需要再次播放(重启计时器)
var that = this;
cont.hover(function(){
clearInterval(t);
},function(){
clearInterval(t);
t = setInterval(()=>{
that.changeIndex(1);
},that.delayTime)
})
}
}
new Imgmove(ops);
}
})
})(jQuery);
dome example:
$(".banner1").banner({
// 必传
img:$(".banner1").children(".imgbox").find("a"),
// 可选，传了就有功能，没传就没有功能
left:$(".banner1").find("#left"),
right:$(".banner1").find("#right"),
// 可选，默认为true，true就有功能，false就没有功能
list:true,
// 可选，默认为true，true就有功能，false就没有功能
autoPlay:true,
// 可选，默认为2000
delayTime:3000,
// 可选，默认为200
moveTime:300
})
