js中用oop思想封裝輪播

用戶能夠本身設置：一、速度speed：fast,normal,slow

二、是否自動輪播：true，false

三、選擇器（固然能夠根據需求，增長，目前先封的這三個）僅供參考

以爲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封裝部分

先是自執行格式(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};     
})()