js中用oop思想封装轮播

最新推荐文章于 2022-05-03 22:08:18 发布

漂亮得皮皮

最新推荐文章于 2022-05-03 22:08:18 发布

阅读量267

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_36706903/article/details/81159172

本文介绍了一个基于jQuery的轮播图插件封装过程，包括HTML结构、CSS样式及JavaScript逻辑。用户可根据需求自定义配置项，如播放速度、自动轮播等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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