jQuery封装轮播图插件

// 布局要求,必须有一个容器,图片和两个按钮，布局方式自定，小圆点样式固定
// <div class="all">
// <img src="img/bg1.jpg" >
// <img src="img/bg2.jpg" >
// <img src="img/bg3.jpg" >
// <img src="img/bg4.jpg" >
// <img src="img/bg5.jpg" >
// <input type="button" name="" value="<<" />
// <input type="button" name="" value=">>" />
// </div>// 使用方法的参数
// $(".all").banner({
// imgs: $('.all').find('img'), // 必选，轮播的图片
// prev: $('.all').find('input').eq(0), // 必选，上一页按钮
// next: $('.all').find('input').eq(1), // 必选, 下一页按钮
// points: true, // 可选，小圆点，默认true
// autoplay: true, // 可选, 默认为true，自动轮播
// delay: 300, // 可选，默认为3000
// current: 3, // 可选， 默认是第0张图片显示
// duration: 300 // 可选， 默认为300 -- 动画时长
// });;(function($){
"use strict";
class Banner{
constructor(ele,obj) {
// 接受一个元素和一个参数对象
var {imgs,prev,next,points,autoplay,delay,current,duration}=obj;
// 处理数据
this.index=(current||1)-1;
this.img=imgs;
this.prev=prev;
this.next=next;
this.points= points===false?false:true;
this.autoplay= autoplay===false?false:true; // 控制动画时长
if(this.autoplay){
this.delay=delay||1000;
}else{
this.delay=1000000000;
}
this.duration=duration||500;
// 在用户有要求的情况下生成小按钮的容器
if(this.points){
ele.append($("<ul class='banner-ul'>"));
} // 样式，减少用户一些使用的繁琐操作
ele.css({
overflow: "hidden"
})
this.img.css({
position: "absolute",
top: 0,
left: "100%"
})
this.img.eq(this.index).css("left",0);
this.next.css("z-index",34);
this.prev.css("z-index",34); this.ul=ele.children("ul.banner-ul");
this.ele=ele; this.init();
// 根据用户需求判定是否自动轮播
if(this.autoplay)
this.time();
}
// 自动轮播功能
time(){
clearInterval(this.tt);
this.tt=setInterval(()=>{
this.kg=true;
this.init2();
},this.delay)
}
init(){
var that=this;
// 为前一张后一张两个按钮添加事件
this.prev.on("click",function(){
that.kg=false;
that.init2();
});
this.next.on("click",function(){
that.kg=true;
that.init2();
});
// 需要小圆点的情况下生成小圆点
if(this.points){
for(var i=0;i<this.img.length;i++){
this.ul.append($("<li>"));
}
this.li=this.ul.children("li"); // 添加样式
this.ul.css({
position: "absolute",
left:"43%",
display: "flex",
width: "14%",
"justify-content": "space-around",
bottom: "10px",
padding: 0,
})
this.li.css({
display: "block",
width: "40px",
height: "3px",
"z-index":30
})
// 给当前和其他添加样式
this.li.eq(this.index).css("background","red");
this.li.eq(this.index).siblings().css("background","#0ff");
this.init1();
}
}
init1(){
var that=this;
// 给每个小圆点移入事件,鼠标移入时切换图片
this.ul.on("click","li",function(){
if(that.index<$(this).index()){
that.qian=that.index;
that.kg=true;
}else if(that.index==$(this).index()){
return 0;
}else{
that.hou=that.index;
that.kg=false;
}
that.index=$(this).index();
that.move();
});
}
init2(){
// 计算索引
if(this.kg)
if(this.index==this.img.length-1)
{this.index=0;
this.qian=this.img.length-1;}
else
{this.index++;
this.qian=this.index-1}
else
if(this.index==0)
{this.index=this.img.length-1;
this.hou=0;}
else
{this.index--;
this.hou=this.index+1}
this.move();
}
move(){
clearInterval(this.tt);
if(this.points){
// 清理其他小圆点特殊样式
for(var j=0;j<this.li.length;j++)
this.li.eq(j).css("background","#00FFFF");
// 给当前小圆点加特殊样式
this.li.eq(this.index).css("background","red");
}
var w=parseInt(this.img.eq(1).width());
// 动画,轮播图的图片的具体效果
if(this.kg){
this.img.eq(this.qian).css("left",0).stop().animate({left:-1*w},this.duration);
this.img.eq(this.index).css("left",w+"px").stop().animate({left:0},this.duration);
}else{
this.img.eq(this.hou).css("left",0).stop().animate({left:w},this.duration);
this.img.eq(this.index).css("left",-1*w+"px").stop().animate({left:0},this.duration);
}
// 结尾时将清理掉的计时器重新绑定
if(this.autoplay)
clearInterval(this.tt);
this.tt=setInterval(()=>{
this.kg=true;
this.init2();
},this.delay)
}
}
// 绑定banner方法
$.fn.extend({
banner (obj) {
new Banner(this,obj);
}
});
})(jQuery);