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