封装一个jQuery插件--拼图轮播

html布局如下

<style>
        .box{
            width:320px;
            height:480px;
            border:1px solid #000;
            margin:50px;
            float: left;
            position:relative;
            overflow: hidden;
            
        }
        .box li{
            position:absolute;
            display:none;
            list-style:none;
        }
        .box li img{
            width:320px;
            height:480px;
        }
        .right{
            width:40px;
            height:45px;
            border:0;
            background:#ccc;
            color:#fff;
            cursor: pointer;
            position:absolute;
            top:220px;
            left:280px;
            font:30px/45px "";
            z-index:100;
        }
        .left{
            width:40px;
            height:45px;
            border:0;
            background:#ccc;
            color:#fff;
            cursor: pointer;
            position:absolute;
            top:220px;
            left:0;
            font:30px/45px "";
            z-index:100;
        }
    </style>
    <div id="box1" class="box">
    <ul>
        <li><img src="img/w2.jpg" alt=""></li>
        <li><img src="img/w3.jpg" alt=""></li>
        <li><img src="img/w4.jpg" alt=""></li>
        <li><img src="img/w5.jpg" alt=""></li>
        <li><img src="img/w6.jpg" alt=""></li>
        <li><img src="img/w2.jpg" alt=""></li>
        <li><img src="img/w3.jpg" alt=""></li>
        <li><img src="img/w4.jpg" alt=""></li>
    </ul>
    <input type="button" class="right" value="&gt;">
    <input type="button" class="left" value="&lt;">
</div>

下面是js代码部分

;(function(){
    "use strict"
    $.fn.banner=function(options){
        var obj={};
        // 利用结构赋值获取参数的值
        var {items,left,right,list,autplay,index,row,col,delaytime,flytime,timeout,way}=options;
        // 对获取到的值进行处理
        list=list===false ? false : true;
        autplay=autplay===false ? false :true;
        index=index||0;
        row=row||10;
        col=col||10;
        delaytime=delaytime||50;
        flytime=flytime||30;
        timeout=timeout||1000;
        way=way||"order";
        // 根据传入的way来确定切片消失的时间
        switch(way){
            case "order":
                obj.backtime=flytime+delaytime*(row*col);break;
            case "row":
                obj.backtime=flytime+delaytime*row;break;
            case "col":
                obj.backtime=flytime+delaytime*col;break;
        }
        // 根据lock的状态，来判定当时小切片是否还在飞行
        obj.lock=false;
        // 根据图片的宽高来确定小切片的宽高
        var divHight=items.height()/row;
        var divWidth=items.width()/col;
        // 备份全局$(this)
        var $this=$(this);
        // 利用for循环来制造小切片，根据小切片的r与c来确定它的背景图片的位置，同时把小切片塞进大框里
        for(var r=0;r<row;r++){
            for(var c=0;c<col;c++){
                $("<div></div>").css({
                    "width":divWidth+"px",
                    "height":divHight+"px",
                    "left":0,
                    "top":items.height()+"px",
                    "display":"none",
                    "position":"absolute",
                    "background-position":`${-c*divWidth}px ${-r*divHight}px`
                }).appendTo($(this))
            }
        }
        // 显示初始时的index默认图片
        items.eq(index).parent("li").css("display","block");
        // 根据list来确定是否有小圆点
        if(list){
            var str="";
            // 根据图片的数量来决定创造小圆点的数量
            for(var i=0;i<items.length;i++){
                str+=`<dd></dd>`
            }
            // 先把dl塞进大框this里面，同时设置样式，然后将创造好以后的dd塞进dl里面
            $("<dl></dl>").appendTo($(this)).css({
                "margin":0,
                "padding":0,
                "position":"absolute",
                "width":items.length*30+"px",
                "height":20+"px",
                "bottom":30+"px",
                "left":50+"%",
                "margin-left":-items.length*30/2+"px"
                }).html(str);  
                // 设置dd的样式
            $this.children("dl").children("dd").css({
                "margin":0,
                "padding":0,
                "width":20+"px",
                "height":20+"px",
                "border-radius":50+"%",
                "background":"#ccc",
                "float":"left",
                "margin-left":10+"px",
                "cursor":"pointer",
                "list-style":"none"
            })
            // 让下标等于index的小圆点背景颜色显示为粉色
            .eq(index).css("background","#f99").siblings().css("background","#ccc");
            // 点击小圆点事件，点击小圆点改变信号量index
            $this.children("dl").children("dd").click(function(){
                if(obj.lock)return;
                index=$(this).index();
                obj.fly();
                $(this).css("background","#f99").siblings().css("background","#ccc");
            })
        }
        // 这是点击右按钮触发的函数，因为后面自动播放也会用到所以就单独拿出来
        obj.rightmove=function(){
            if(obj.lock)return;
            index++;
            if(index>items.length-1){
                index=0;
            }
            obj.fly();
            if(!list)return;
            $this.children("dl").children("dd").eq(index).css("background","#f99").siblings().css("background","#ccc");
        }
        // 判断是否传入了左右按钮
        if(left!=undefined&&left.length>0&&right!=undefined&&right.length>0){
            right.click(obj.rightmove)
            // 点击左按钮事件
            left.click(function(){
                if(obj.lock)return;
                index--;
                if(index<0){
                    index=items.length-1;
                }
                obj.fly();
                if(!list)return;
                $this.children("dl").children("dd").eq(index).css("background","#f99").siblings().css("background","#ccc");
            })
        }
        // 根据信号量来改变小切片的背景图片以及要显示的图片
        obj.fly=function(){
             //对应当点击事件中的lock状态，true表示还在运行，则再次点击无效
            obj.lock=true;
            //这步很关键，根据idx让img兄弟元素中排名为index的图片成为小div的背景图
            $this.children("div").css("background-image","url("+items.eq(index).attr("src")+")")
            .each(function(k){
                // 根据传入的way来决定是如何进场的
                switch(way){
                    case "order":
                        obj.d=k;break;
                    case "row":
                        obj.d=parseInt(k/col);break;
                    case "col":
                        obj.d=k%col;break;
                }
                // 让小切片在this这个大框内显示飞行轨迹（基本看不清因为时间太短）
                $(this).css("display","block").delay(obj.d*delaytime).animate({
                    "left":k%col*divWidth+"px",
                    "top":parseInt(k/col)*divHight+"px",
                },flytime)
            })
            // 利用数学计算出所有小切片飞完的时间，等所有小切片都飞完的时候让所有小切片回到原来的位置
            setTimeout(function(){
                $this.children("div").css({
                    "left":0,
                    "top":items.height()+"px",
                    "display":"none"
                });
                // 同时让真正的照片显示出来
                items.eq(index).parent("li").css("display","block").siblings().css("display","none");
                obj.lock=false;
            },obj.backtime)
        }
        // 是否自动播放
        if(autplay){
            var t=setInterval(obj.rightmove,obj.backtime+timeout);
            $(this).hover(function(){
                clearInterval(t);
            },function(){
                t=setInterval(obj.rightmove,50*(col*row+20));
            })
        }
    }
})();