图片轮播之插件封装

最新推荐文章于 2024-07-12 16:27:40 发布

aa410914955

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量121

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaohanh/p/7216483.html

版权

我封装的这个轮播插件只需要获取到图片和按钮就可以啦。

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 代码

<body>
    <div class="body">

<ul>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
        <a href="javascript:;" class="left"></a>
        <a href="javascript:;" class="right"></a>
    </div>

js部分，插件调用

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <script type="text/javascript">
    $.slider({
        imgElement:$(".body img"),
        liElement:$(".body li"),
        leftBtn:$(".left"),
        rightBtn:$(".right"),
        time:2000
    })
</script>
</body>

封装的插件

(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)

效果图

转载于:https://www.cnblogs.com/xiaohanh/p/7216483.html

aa410914955

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮播之插件封装

我封装的这个轮播插件只需要获取到图片和按钮就可以啦。css 样式.body{ width: 700px; margin: 100px auto; position: relative; height: 300px; overflow: hidden; } .body ...
复制链接

扫一扫