图片轮播之插件封装

封装的这个轮播插件，只需要获取到图片和按钮就可以了。
css样式

.body{
        width: 700px;
        margin: 100px auto;
        position: relative;
        height: 300px;
        overflow: hidden;
    }
    .body img{
        width: 700px;
        position: absolute;
        display: none;
    }
    .body ul{
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);

    }
    .body li{
        list-style: none;
        float: left;
        width: 15px;
        height: 15px;
        border-radius: 50px;
        background: none;
        border: 2px solid #fff;
        margin-right: 10px;
        cursor: pointer;
    }
    .active{
        background-color: #fff !important;
        
    }
    .body a{
        text-decoration: none;
        position: absolute;
        display: block;
        top: 50%;
        transform: translateY(-50%);
        height: 50px;
        width: 30px;
        background-size: 100% 60%;
        background-color: rgba(0,0,0,0.3);
    }
    .left{
        left: 0;
        background: url('../img/left.png') no-repeat center center;
    }
    .right{
        right: 0;
        background: url('../img/right.png') no-repeat center center;
    }

页面结构 html 代码

    

        ![](img/1.jpg)
        ![](img/2.jpg)
        ![](img/3.jpg)
        

            

            

            

        
        
        
    

js 调用插件

插件

(function($){
    function slider(options){
        this.opts=$.extend({},slider.defaluts,options);
        this._imgSlider();
    }
    //设置默认值
    slider.defaluts={
        imgElement:null,
        liElement:null,
        leftBtn:null,
        rightBtn:null,
        time:2000
    }
    slider.prototype._imgSlider=function(){
        var opts=this.opts,
            index=0,
            len=opts.imgElement.length,
            timeInter=null;
        if(opts.imgElement=='') return;
        opts.imgElement.eq(0).show();
        showTime();
          //当鼠标经过  轮播停止，移开继续
          opts.imgElement.hover(function() {
            clearInterval(timeInter);
          }, function() {
            showTime();
          });

        //点击li  显示对应的图片
        opts.liElement.click(function(){
            var id=$(this).index();
            show(id);
        });
        //向左向右
        opts.leftBtn.click(function(){
            clearInterval(timeInter);
            --index;
            index=Math.max(0,index);
            show(index);
            showTime();
        });
        opts.rightBtn.click(function(){
            clearInterval(timeInter);
            ++index;
            index=Math.min(len-1,index);
            show(index);
            showTime();
        });


        function showTime(){
            timeInter=setInterval(function(){
                index++;
                if(index>len){
                    index=0;
                }
                show(index);
            },opts.time);
        }
        function show(index){
            opts.imgElement.eq(index).fadeIn(1000).siblings('img').fadeOut(1000);
            opts.liElement.eq(index).addClass('active').siblings('li').removeClass('active');
        }

    }
    $.extend({
        slider:function(options){
            new slider(options);
        }
    })
})(jQuery)

效果图

图片.png