Jcarouselliten zurücksetzen Autoscroll -Intervall

Question

Wie kann ich das Auto-Scroll-Intervall auf meinem zurücksetzen? Jcarousellit Carousel nach einem Ereignis, damit Sie den Inhalt für das vollständige Intervall betrachten können, unabhängig davon, wie weit der Timer war, als Sie als nächstes oder vorher geklickt haben? Wenn ich jetzt nach 9 Sekunden auf Weiter oder vorherige klicke, werden nach 1 Sekunde erneut geprüft.

In dem Jcarousellite Quellcode In den Zeilen 274-277 wird die Auto-Scroll mithilfe der Auto-Scroll implementiert setInterval. Ich weiß, dass Sie verwenden können clearInterval Wenn Sie die ID von setInterval zurückgegeben haben, aber es gibt einen, den ich außerhalb des Änderns des Quellcodes erhalten kann, und das möchte ich nicht.

Irgendwelche Ideen? Vielen Dank!

Answer 1

Jcarousellite selbst bietet keine einfache Möglichkeit, das Auto-Scrolling zu stoppen. Was ein einfacheres Problem ist, tun Sie dann, was Sie wollen (? Habe ich das richtig verstanden: Sie möchten nur, dass die Autoscroll vorübergehend auf Klicken aufhören und dann weitermachen).

Hacky + potenziell fehlerhafte Methode, um den Autoscroll insgesamt zu stoppen

var x; //hold interval id
$(function() {
    var y = window.setInterval; //backup original setInterval function
    //overwrite with new function which stores the id for us
    window.setInterval = function() {
        x = y(arguments[0], arguments[1]);
        return x; 
    };
    //now construct carousel
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        auto: 500 
    });
    //now restore original setInterval function
    //as we only needed the custom one for the carousel to capture the hidden
    //internal call to setInterval
    window.setInterval = y;
});
$("#stopAutoScrollButton").click(function() {
    clearInterval(x);
});

---

Echte Lösung

Da wir Jcarousellit nicht dazu bringen können, dies selbst zu tun, simulieren wir das auto Verhalten selbst.

$(function() {
    var autoTime = 5000; //5s
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
    //simulate autoscroll by simulating "click" on next link
    var x = setInterval("$('.next').trigger('click');", autoTime);
    //if stopAuto is clicked the autoscroll is suspended for autoTime
    //no matter how far along the timer already was
    $("#stopAuto").click(function() {
        clearInterval(x);
        x = setInterval("$('.next').trigger('click');", autoTime);
    });
});

Answer 2

Hier ist eine Version mit einer Pause auf integriertem Mouseover. Funktioniert gut.http://github.com/cheald/jcarousel-lite

Answer 3

Keine dieser Antworten war das, wonach ich gesucht habe, aber genau das kommt es, wenn ich 'JCarousellite Reset Timer' google, also für die nächste Person, die nach:

• Lassen Sie den Timer zurücksetzen, wenn Sie auf Ihre vorherigen/nächsten Folienschaltflächen klicken
• Pause die Diashow bei Schweber

Dann ist das, was ich zusammengestellt habe und das für mich funktioniert:

(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),a=$("#featuredlistings a.next"),ul=$("ul",div),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v;}var li=$("li",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width(),height:li.height()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){resetAuto(); return go(curr-o.scroll);});if(o.btnNext)$(o.btnNext).click(function(){resetAuto(); return go(curr+o.scroll);});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i);});});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll);});if(o.auto){autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);function resetAuto(){clearInterval(autoScroll);autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);};div.hover(function(){clearInterval(autoScroll);},function(){autoScroll=setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);});}function vis(){return li.slice(curr).slice(0,v);};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll;}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll;}else curr=to;}else{if(to<0||to>itemLength-v)return;else curr=to;}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false;});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled");}}return false;};});};function css(el,prop){return parseInt($.css(el[0],prop))||0;};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight');};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom');};})(jQuery);

Tauschen Sie es einfach mit Ihrem aktuellen JCarousellite -Skript aus und verwenden Sie es genauso.

Answer 4

Wenn Sie in der Lage sind, den Plugin -Code zu ändern:

Fügen Sie eine Variable hinzu, um die Intervall -ID zu den Plugins -Standardeinstellungen zu speichern

interval: null

Suchen nach:

if(o.auto)

Nehmen Sie den hier ausgeführten Code und erstellen Sie eine interne Funktion damit wie:

function runAuto() {
    setInterval(function() {
        go(curr+o.scroll);
    }, o.auto+o.speed);
}

Speichern Sie jetzt einfach das Intervall in Ihrer definierten Variablen, löschen Sie es jedoch zuerst:

function runAuto() {
    clearInterval(o.interval);
    o.interval = setInterval(function() {
        go(curr+o.scroll);
    }, o.auto+o.speed);
}

Suche nach dem go() Funktion im Plugin funktionieren und a hinzufügen runAuto(), Das Intervall setzt jedes Mal, wenn die Funktion genannt wird, das Intervall zurück.

Natürlich müssen Sie auch das hinzufügen runAuto() Aufruf if(o.auto) Das Intervall beginnt also zunächst.