简单的无限循环轮播插件

发表于 | 分类于

无聊的时候写了一个无限循环的轮播插件，只有切换功能。其实也就是拿来练练手。

主要原理就是，通过克隆轮播元素，以及修改元素的left值来达到效果。

首先是Html结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="slide-wrap" id="slide-wrap">
   <div class="slide-bd" id="slide-bd">
       <ul>
           <li><img src="banner.png" width="650" height="350" alt=""/></li>
           <li><img src="banner.png" width="650" height="350" alt=""/></li>
           <li><img src="banner.png" width="650" height="350" alt=""/></li>
       </ul>
   </div>
   <div class="slide-ctr" id="slide-ctr">
       <ul>
           <li class="active"><a href="javascript:;"></a></li>
           <li><a href="javascript:;"></a></li>
           <li><a href="javascript:;"></a></li>
       </ul>
   </div>
</div>

样式内容：

1
2
3
4
5
6
7
8
.slide-wrap {width:650px;height:350px;margin-top:100px;float:left;position:relative;}
.slide-wrap .slide-bd {position:relative;width:650px;height:350px;overflow:hidden;}
.slide-wrap .slide-bd ul {position:absolute;left:0;top:0;}
.slide-wrap .slide-bd ul li {width:650px;float:left;}
.slide-wrap .slide-ctr {position: absolute;bottom:30px;}
.slide-wrap .slide-ctr ul li {width:12px;float:left;margin-right:10px;}
.slide-wrap .slide-ctr ul li a {width:6px;height:6px;background-color:#fff;border-radius:6px;display:block;}
.slide-wrap .slide-ctr ul li.active a {width:8px;height:8px;border-radius:8px;margin-top:-1px;}

下面封装成的jQqery插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$.fn.zyxSlide = function(options) {
    $.fn.zyxSlide.defaults = {
        index:0,
        width:650,
        speed:500,
        time:3000
    };

    return this.each(function() {
        //var opts = $.extend($.fn.zyxSlide.defaults, options) #不加{}则直接在原对象上进行扩展
        var opts = $.extend({},$.fn.zyxSlide.defaults, options),
                that = $(this),
                lisize = that.find(".slide-bd li").length,
                bdUl = that.find(".slide-bd ul"),
                ctrUl = that.find(".slide-ctr ul"),
                pindex = 0;
        var methon = {
            setUlWidth:function(){
                that.find(".slide-bd ul").width(function(){
                    return lisize*2*opts.width;
                });
            },
            transSlide:function(){
                opts.index++;
                if(opts.index>lisize){opts.index=1;bdUl.animate({"left":0},0);}
                if(pindex>=lisize-1) {pindex = 0;}else {pindex++}
                bdUl.animate({"left":-(opts.index*opts.width)+"px"},opts.speed);
                ctrUl.find("li").eq(pindex).addClass("active").siblings("li").removeClass("active");
            },
            init:function(){
                bdUl.append(bdUl.children("li").clone());
                methon.setUlWidth();
                setInterval(methon.transSlide,opts.time);
            }
        };
        methon.init();
    });
}

这里面的核心代码就是init里面的clone内容。还算比较容易理解与实现。