Непрерывная анимация после нажатия следующей кнопки с помощью Easyslider 1.7

Question

Кто-нибудь, кто когда-либо использовал это, знает, как заставить слайды продолжать прокрутку после нажатия следующей кнопки?В настоящее время, если вы нажмете кнопку «Далее», они останутся на этом слайде.

Мои навыки jQuery немного ниже среднего, и я не могу понять, есть ли простой способ сделать это.Любая помощь будет грандиозна

Answer 1

Я поступил от Вклада Кэмерона и просто отредактировал условие (удали! Кликнул):

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

Answer 2

Я получил его на работу, изменив файл easyslider1.7.js.

Строка 195 у вас есть

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

Я добавил следующее выражение:

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);
    };
};

Возможно, это не самое элегантное решениеjQuery expert) но, похоже, работает, хотя только для стрелок влево и вправо, а не для элементов управления.

Answer 3

У меня есть решение для автоматического непрерывного скольжения с цифровым управлением:

Перейдите на строку 107 и измените:

это:

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

к этому:

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);
    };
};

Это решает проблему!

Ура!

Answer 4

Весь фиксированный код:

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