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);