jQuery-轮播图封装

轮播代码封装到jquery对象方法,目前还不完善

DOM代码:

<div class="slider">
    <div class="ul" data-options="a:1,b:2">
        <ul>
            <li class="li1">123</li>
            <li class="li2">234<br>123</li>
            <li class="li3">345</li>
        </ul>
        <div></div>
        <div></div>
    </div>
    <div></div>
</div>

jquery对象方法封装代码

var slider=window.slider={
            sliderShow:function(jq,num){
                var i=num||0;
                var options=new Function("return"+jq.data("options"))();
                var count=options.count;
                jq.children('.a').eq(0).addClass('current');
                slider.timer=setInterval(function(){
                    i++;
                    var next=(i==3)?0:(i+1);
                    var last=i-1;
                    if(i==count){
                        i=0;
                        next=i+1;
                    }
                    jq.children('.a').removeClass('current next last').eq(next).addClass('next').end().eq(last).addClass('last').end().eq(i).addClass('current');
                },options.time);
            },
            nextClick:function(jq,num){
                clearInterval(this.timer);
                this.sliderShow(jq,jq);
                var options=new Function("return"+jq.data("options"))();
                var cut=jq.children('.current').index();
                var count=options.count;
                // 前进后退按钮还没封装
            }
        };
        slider.sliderShow($(".test"));
        $(".nextBtn").click(function(){
            slider.nextClick($(".test"));
        })
        $(".hae1").click(function(e){
            console.log(e.target);
        });
        $.data($("#test")[0],"foo",{a:1,b:2});
        $.fn.slider=function(_a1,_a2){
            if(typeof _a1=="string"){
                $.fn.slider.methods[_a1](this,_a2)
            }
            _a1=_a1||{};
            return this.each(function(index, el) {
                var _a3=$.data(this,"slider");
                if(_a3){
                    $.extend(_a3.options,_a2);
                }else{
                    _a3=$.data(this,"slider",{
                        options:_a2
                    })
                }
            });
        };
        $.fn.slider.methods={
            options:function(jq){
                return $.data(jq[0],"slider").options;
            }
        }

 

posted @ 2018-01-23 11:18  jackie-ren  阅读(225)  评论(0编辑  收藏  举报