js中用oop思想封装轮播-CSDN博客

用户可以自己设置：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};     })()复制代码