js中用oop思想封裝輪播

漂亮得皮皮發表於2018-07-22
JSOOP封裝
使用者可以自己設定：1、速度speed：fast,normal,slow
2、是否自動輪播：true，false
3、選擇器（當然可以根據需求，增加，目前先封的這三個）僅供參考
覺得oop物件導向的思想比較有意思，前端中JS也可借鑑思想，想讓程式碼變得更好看，變得更酷一些， 在邏輯沒問題的基礎上，可以用oop思想進行優化喲。我個人還在不斷地摸索學習中，希望能夠和大家一起進步！
HTML格式

<div id="slider">        <figure class="active">            <img src="./images/1.jpg" alt="img"/>            <figcaption></figcaption>        </figure>
        <figure>            <img src="./images/2.jpg" alt="img"/>            <figcaption></figcaption>        </figure>                <figure>            <img src="./images/3.jpg" alt="img"/>            <figcaption></figcaption>        </figure>    </div>複製程式碼

css

/*重置*/   *{         margin:0;         padding:0;    }    #slider{        width:500px;        height:360px;        margin:100px auto;        position:relative;    }
/* 圖片*/   figure{        width:500px;        height:360px;        position:absolute;        top:0;        left:0;        overflow: hidden;        text-align: center;        display: none;    }    .active{        display: block;    }    img{        width: auto;        height: 360px;    }
/* 圓點 */    #tab{        width:105px;        height:10px;        position:absolute;        bottom:10px;        left:50%;        margin-left:-50px;    }
/* 清除浮動 */    #tab ul{        overflow: hidden;    }    #tab ul li{        width:10px;        height:10px;        margin:0 5px;        background:rgba(255,255,254,.5);        border-radius:100%;        cursor:pointer;        list-style:none;        float:left;    }
    .on{         transform: scale(1.5);        background: skyblue;    }
/*箭頭*/    #btn div{    width:40px;    height:40px;    position:absolute;    top:50%;    margin-top:-20px;    color:#fff;    background:#999;    background:rgba(0,0,0,.5);    font-size:20px;    font-weight:bold;    font-family:'Microsoft yahei';    line-height:40px;    text-align:center;    cursor:pointer;    }    #btn div#left{         left:0;    }    #btn div#right{         right:0;    }複製程式碼

js引用檔案以及js配置輪播的引數

<script src="./jquery-1.11.1.js"></script>    <script src="./lunbo.js"></script>    <script>         lunbo.init({            ele:"#slider",            auto:true,            speed:"normal"        })    </script>複製程式碼

重點來了
js封裝部分
先是自執行格式(function(){})()==>然後在裡面先把輪播基本的邏輯寫好==>在對初始化進行封裝，傳參等
具體程式碼如下

(function(){   if(isAuto){//如果自動播放為真，才進入自動播放    autoplay();    }   var isAuto=false;//預設自動播放為false   var ele="#slider";//操作的選擇器   var index = 0;//當前圖片預設為第一張   var speed=1500;//圖片切換速度   var lunbo={     init:function(obj){        isAuto=obj.auto||isAuto;//預設自動播放為false        ele=obj.ele||ele;//操作的選擇器        if(typeof obj.speed=="string"){            if(obj.speed=="fast"){                obj.speed=1000;            }else if(obj.speed=="normal"){                obj.speed=1500;            }else if(obj.speed=="slow"){                 obj.speed=2500;            }        }         speed=obj.speed||speed;       //這裡用this報錯，就改了        lunbo.showCicrl();        lunbo.arrows();        lunbo.right();        lunbo.left();        lunbo.clickCircl();        lunbo.autoplay();        lunbo.mouseOver();        lunbo.mouseOut();   },     //生成圓點   showCicrl:function(){    var str='';    str+= "<li class='on'></li>";//預設第一個小圓點有樣式    for(var i=1;i<$(ele).find(' figure').length;i++){        str+= "<li></li>"    }        $(ele).append(            " <div id='tab'>"+                    "<ul>"+                      str                    +"</ul>"+            "</div>")   },   //動態生成箭頭   arrows:function(){         $(ele).append(            "<div id='btn'>"+                "<div id='left'>&lt;</div>"+                "<div id='right'>&gt;</div>"+            "</div>")   },
   //圖片增減"active"   figureClassChange:function (){       //給每一個圖片先移除class        $(ele).find('figure').each(function(index,item){            $(item).removeClass('active');           });        //給當前的圖片新增class        var arr = $(ele).find(' figure');        $(arr[index]).addClass('active');   },   //圓點增減class "on"   dotsClassChange:function (){        $('#tab').find('li').each(function(index,item){            $(item).removeClass('on');           });        var arr = $('#tab').find('li');        $(arr[index]).addClass('on');   },     /* //封裝圖片和小圓點增減class樣式    function classChange(ele,classStyle){        $(ele).find(' figure').each(function(index,item){            $(item).removeClass(classStyle);           });        var arr = $(ele);        $(arr[index]).addClass(classStyle);   } */    //左箭頭點選    left:function(){       $("#left").click(function(){            index--            if(index<0){                index=$(ele).find('figure').length-1;            }           /*  classChange('#slider','active');            classChange('#tab','on'); */            lunbo.figureClassChange();//先移除圖片的所有樣式，給當前的新增樣式            lunbo.dotsClassChange();                   })   },    //右箭頭點選    right:function(){            $("#right").on("click",function(){                index++                if(index>=$(ele).find('figure').length){                    index=0;                }                               lunbo. figureClassChange();                lunbo.dotsClassChange();        })    },    //點選圓點    clickCircl:function(){        $("#tab li").each(function(index,item){            $(item).click(function(){ //小圓點點選的時候，先移出所有小圓點樣式，再給當前的小圓點新增樣式                $('#tab').find('li').each(function(index,item){//先移出所有小圓點的樣式                    $(item).removeClass('on');                   });
                $(this).addClass('on');                //實現圖片和小圓點的一一對應                //這裡的程式碼沒辦法用封裝好的figureClassChange（），原因還在找                $(ele).find('figure').each(function(index,item){                    $(item).removeClass('active');                   });                var arr = $(ele).find('figure');                $(arr[index]).addClass('active');                              /* classChange('#slider','active'); */            })        })            },    //自動播放    autoplay:function(){        timer= setInterval(function(){            $("#right").click(); //JQuery 自動觸發事件        },1500)    },
    //滑鼠移入    mouseOver:function(){        $(ele).find('figure').on("mouseover",function(){            clearInterval(timer);        })    },    //滑鼠移出    mouseOut:function(){        $(ele).find('figure').on("mouseout",function(){            lunbo.autoplay();        })    } }     window.lunbo={init:lunbo.init};     })()複製程式碼


相關文章