小贝子编程

使用Easyslider 1.7点击next按钮后的连续动画



用过这个的人知道如何让幻灯片在点击下一个按钮后继续滚动吗?目前，如果你点击"下一步"按钮，它们会停留在那张幻灯片上。

我的jQuery技能略低于平均水平，我不知道自己是否有一个简单的方法来做到这一点。任何帮助都将是伟大的:)

Easyslider是一个jQuery插件，下面是JS:

(function($) {
$.fn.easySlider = function(options){
    // default configuration properties
    var defaults = {            
        prevId:         'prevBtn',
        prevText:       'Previous',
        nextId:         'nextBtn',  
        nextText:       'Next',
        controlsShow:   true,
        controlsBefore: '',
        controlsAfter:  '', 
        controlsFade:   true,
        firstId:        'firstBtn',
        firstText:      'First',
        firstShow:      false,
        lastId:         'lastBtn',  
        lastText:       'Last',
        lastShow:       false,              
        vertical:       false,
        speed:          800,
        auto:           true,
        pause:          3000,
        continuous:     true, 
        numeric:        false,
        numericId:      'controls'
    }; 
    var options = $.extend(defaults, options);  
    this.each(function() {  
        var obj = $(this);              
        var s = $("li", obj).length;
        var w = $("li", obj).width(); 
        //var h = $("li", obj).height(); 
        var clickable = true;
        obj.width(w); 
        //obj.height(h); 
        obj.css("overflow","hidden");
        var ts = s-1;
        var t = 0;
        $("ul", obj).css('width',s*w);          
        if(options.continuous){
            $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
            $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
            $("ul", obj).css('width',(s+1)*w);
        };              
        if(!options.vertical) $("li", obj).css('float','left');
        if(options.controlsShow){
            var html = options.controlsBefore;              
            if(options.numeric){
                html += '<ol id="'+ options.numericId +'"></ol>';
            } else {
                if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href="javascript:void(0);">'+ options.firstText +'</a></span>';
                html += ' <span id="'+ options.prevId +'"><a href="javascript:void(0);">'+ options.prevText +'</a></span>';
                html += ' <span id="'+ options.nextId +'"><a href="javascript:void(0);">'+ options.nextText +'</a></span>';
                if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href="javascript:void(0);">'+ options.lastText +'</a></span>';              
            };
            html += options.controlsAfter;                      
            $(obj).after(html);                                     
        };
        if(options.numeric){                                    
            for(var i=0;i<s;i++){                       
                $(document.createElement("li"))
                    .attr('id',options.numericId + (i+1))
                    .html('<a rel='+ i +' href="javascript:void(0);">'+ (i+1) +'</a>')
                    .appendTo($("#"+ options.numericId))
                    .click(function(){                          
                        animate($("a",$(this)).attr('rel'),true);
                    });                                                 
            };                          
        } else {
            $("a","#"+options.nextId).click(function(){     
                animate("next",true);
            });
            $("a","#"+options.prevId).click(function(){     
                animate("prev",true);               
            }); 
            $("a","#"+options.firstId).click(function(){        
                animate("first",true);
            });             
            $("a","#"+options.lastId).click(function(){     
                animate("last",true);               
            });             
        };
        function setCurrent(i){
            i = parseInt(i)+1;
            $("li", "#" + options.numericId).removeClass("current");
            $("li#" + options.numericId + i).addClass("current");
        };
        function adjust(){
            if(t>ts) t=0;       
            if(t<0) t=ts;   
            if(!options.vertical) {
                $("ul",obj).css("margin-left",(t*w*-1));
            } else {
                $("ul",obj).css("margin-left",(t*h*-1));
            }
            clickable = true;
            if(options.numeric) setCurrent(t);
        };
        function animate(dir,clicked){
            if (clickable){
                clickable = false;
                var ot = t;             
                switch(dir){
                    case "next":
                        t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                       
                        break; 
                    case "prev":
                        t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
                        break; 
                    case "first":
                        t = 0;
                        break; 
                    case "last":
                        t = ts;
                        break; 
                    default:
                        t = dir;
                        break; 
                };  
                var diff = Math.abs(ot-t);
                var speed = diff*options.speed;                     
                if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );              
                } else {
                    p = (t*h*-1);
                    $("ul",obj).animate(
                        { marginTop: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );                  
                };
                if(!options.continuous && options.controlsFade){                    
                    if(t==ts){
                        $("a","#"+options.nextId).hide();
                        $("a","#"+options.lastId).hide();
                    } else {
                        $("a","#"+options.nextId).show();
                        $("a","#"+options.lastId).show();                   
                    };
                    if(t==0){
                        $("a","#"+options.prevId).hide();
                        $("a","#"+options.firstId).hide();
                    } else {
                        $("a","#"+options.prevId).show();
                        $("a","#"+options.firstId).show();
                    };                  
                };              
                if(clicked) clearTimeout(timeout);
                if(options.auto && dir=="next" && !clicked){;
                    timeout = setTimeout(function(){
                        animate("next",false);
                    },diff*options.speed+options.pause);
                };
            };
        };
        // init
        var timeout;
        if(options.auto){;
            timeout = setTimeout(function(){
                animate("next",false);
            },options.pause);
        };      
        if(options.numeric) setCurrent(0);
        if(!options.continuous && options.controlsFade){                    
            $("a","#"+options.prevId).hide();
            $("a","#"+options.firstId).hide();              
        };              
    });
};
})(jQuery);

我正在使用的演示:http://cssglobe.com/lab/easyslider1.7/01.html

我通过修改easyslider1.7.js文件使其工作。

第195行有

if(options.auto && dir=="next" && !clicked){
    timeout = setTimeout(function(){
       animate("next",false);
    },diff*options.speed+options.pause);
};

我添加了一个else语句，如下所示

if(options.auto && dir=="next" && !clicked){
    timeout = setTimeout(function(){
        animate("next",false);
    },diff*options.speed+options.pause);
} else {
    if(clicked && options.auto && !options.numeric) {
        timeout = setTimeout(function(){
            animate("next",false);
        },diff*options.speed+options.pause);
    };
};

可能不是最优雅的解决方案(我不是javascript或jQuery专家)，但它似乎是有效的，虽然只适用于左右箭头，而不是控件。

我来自Cameron的贡献，只是编辑条件(删除!点击):

if(options.auto && dir=="next" || dir=="prev"){
    timeout = setTimeout(function(){
       animate("next",false);
    },diff*options.speed+options.pause);
};

我有一个数字控制自动连续滑动的解决方案:

转到第107行并更改:

: 

animate($("a",$(this)).attr('rel'),true);

to this: 

animate(parseInt($("a",$(this)).attr('rel')),true);
然后，在第202行中添加以下内容: 
} else {    
    if(clicked && options.auto && options.numeric) {
        timeout = setTimeout(function(){
            animate("next",true);
        },diff*options.speed+options.pause);
    };
};

这就解决了问题!

干杯!

整个固定代码:

(function($) {
$.fn.easySlider = function(options){
    // default configuration properties
    var defaults = {            
        prevId:             'prevBtn',
        prevText:           'Previous',
        nextId:             'nextBtn',  
        nextText:           'Next',
        controlsShow:   true,
        controlsBefore: '',
        controlsAfter:  '', 
        controlsFade:       true,
        firstId:                'firstBtn',
        firstText:          'First',
        firstShow:          false,
        lastId:                 'lastBtn',  
        lastText:           'Last',
        lastShow:           false,              
        vertical:           false,
        speed:              800,
        auto:               false,
        pause:              2000,
        continuous:     false, 
        numeric:            false,
        numericId:      'controls'
    }; 
    var options = $.extend(defaults, options);  
    this.each(function() {  
        var obj = $(this);              
        var s = $("li", obj).length;
        var w = $("li", obj).width(); 
        var h = $("li", obj).height(); 
        var clickable = true;
        obj.width(w); 
        obj.height(h); 
        obj.css("overflow","hidden");
        var ts = s-1;
        var t = 0;
        $("ul", obj).css('width',s*w);          

        if(!options.vertical) $("li", obj).css({'float':'left','width':w});
        if(options.continuous){
            $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
            $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
            $("ul", obj).css('width',(s+1)*w);
        };  

        if(options.controlsShow){
            var html = options.controlsBefore;              
            if(options.numeric){
                html += '<ol id="'+ options.numericId +'"></ol>';
            } else {
                if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href="javascript:void(0);">'+ options.firstText +'</a></span>';
                html += ' <span id="'+ options.prevId +'"><a href="javascript:void(0);">'+ options.prevText +'</a></span>';
                html += ' <span id="'+ options.nextId +'"><a href="javascript:void(0);">'+ options.nextText +'</a></span>';
                if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href="javascript:void(0);">'+ options.lastText +'</a></span>';              
            };
            html += options.controlsAfter;                      
            $(obj).after(html);                                     
        };
        if(options.numeric){                                    
            for(var i=0;i<s;i++){                       
                $(document.createElement("li"))
                    .attr('id',options.numericId + (i+1))
                    .html('<a rel='+ i +' href="javascript:void(0);">'+ (i+1) +'</a>')
                    .appendTo($("#"+ options.numericId))
                    .click(function(){                          
                        animate(parseInt($("a",$(this)).attr('rel')),true);
                    });                                                 
            };                          
        } else {
            $("a","#"+options.nextId).click(function(){     
                animate("next",true);
            });
            $("a","#"+options.prevId).click(function(){     
                animate("prev",true);               
            }); 
            $("a","#"+options.firstId).click(function(){        
                animate("first",true);
            });             
            $("a","#"+options.lastId).click(function(){     
                animate("last",true);               
            });             
        };
        function setCurrent(i){
            i = parseInt(i)+1;
            $("li", "#" + options.numericId).removeClass("current");
            $("li#" + options.numericId + i).addClass("current");
        };
        function adjust(){
            if(t>ts) t=0;       
            if(t<0) t=ts;   
            if(!options.vertical) {
                $("ul",obj).css("margin-left",(t*w*-1));
            } else {
                $("ul",obj).css("margin-left",(t*h*-1));
            }
            clickable = true;
            if(options.numeric) setCurrent(t);
        };
        function animate(dir,clicked){
            if (clickable){
                clickable = false;
                var ot = t;             
                switch(dir){
                    case "next":
                        t = (ot>=ts) ? (options.continuous ? (t+1) : ts) : (t+1);                       
                        break; 
                    case "prev":
                        t = (t<=0) ? (options.continuous ? (t-1) : 0) : (t-1);
                        break; 
                    case "first":
                        t = 0;
                        break; 
                    case "last":
                        t = ts;
                        break; 
                    default:
                        t = dir;
                        break; 
                };  
                var diff = Math.abs(ot-t);
                var speed = diff*options.speed;                     
                if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );              
                } else {
                    p = (t*h*-1);
                    $("ul",obj).animate(
                        { marginTop: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );                  
                };
                if(!options.continuous && options.controlsFade){                    
                    if(t==ts){
                        $("a","#"+options.nextId).hide();
                        $("a","#"+options.lastId).hide();
                    } else {
                        $("a","#"+options.nextId).show();
                        $("a","#"+options.lastId).show();                   
                    };
                    if(t==0){
                        $("a","#"+options.prevId).hide();
                        $("a","#"+options.firstId).hide();
                    } else {
                        $("a","#"+options.prevId).show();
                        $("a","#"+options.firstId).show();
                    };                  
                };              
                if(clicked) clearTimeout(timeout);
                if(options.auto && dir=="next" && !clicked){;
                    timeout = setTimeout(function(){
                        animate("next",false);
                    },diff*options.speed+options.pause);
                } else {
                    if(clicked && options.auto && !options.numeric) {
                        timeout = setTimeout(function(){
                            animate("next",false);
                        },diff*options.speed+options.pause);
                    };
                    if(clicked && options.auto && options.numeric) {
                        timeout = setTimeout(function(){
                            animate("next",true);
                        },diff*options.speed+options.pause);
                    };
                };
            };
        };
        // init
        var timeout;
        if(options.auto){;
            timeout = setTimeout(function(){
                animate("next",false);
            },options.pause);
        };      
        if(options.numeric) setCurrent(0);
        if(!options.continuous && options.controlsFade){                    
            $("a","#"+options.prevId).hide();
            $("a","#"+options.firstId).hide();              
        };
    });
};
})(jQuery);

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium