jCarouselLite resettare intervallo di scorrimento automatico

Question

can Come reimposta l'intervallo di scorrimento automatico sul mio jCarouselLite giostra dopo qualche evento in modo che ti permette di visualizzare il contenuto per l'intero intervallo di tempo, indipendentemente da quanto lontano lungo il timer è stato quando si è fatto clic successiva o precedente? In questo momento, se scatto successivo o precedente dopo 9 secondi, scorre di nuovo dopo 1 secondo.

jCarouselLite codice sorgente su linee 274- 277 è dove l'auto-scorrimento è implementato utilizzando setInterval. So che è possibile utilizzare clearInterval se avete la ID restituito da setInterval, ma non ce n'è uno che posso ottenere al di fuori di modificare il codice sorgente, e io non voglio farlo.

Tutte le idee? Grazie!

Answer 1

jCarouselLite per sé non fornisce un modo semplice per fermare l'auto-scrolling, che è un problema di facile poi fare quello che ti sembra di volere (ho capito questo diritto:? Si vuole solo l'autoscroll per interrompere temporaneamente il clic e poi continuare)

Hacky + modo potenzialmente buggy per fermare l'autoscroll tutto

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

---

soluzione reale

Come non possiamo ottenere jCarouselLite per fare questo da sola simuliamo il comportamento auto noi stessi.

$(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

Ecco una versione con una pausa al passaggio del mouse incorporato. Funziona bene. http://github.com/cheald/jcarousel-lite

Answer 3

Nessuna di queste risposte erano quello che cercavo, ma questo è quello che si presenta quando Google 'jcarousellite reset del timer', quindi per la prossima persona che cercano di:

• Fare il reset del timer quando si fa clic i pulsanti di scorrimento precedente / successiva
• Mettere in pausa la presentazione su hover

Allora questo è quello che ho messo insieme che funziona per me:

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

Basta scambiare fuori con il vostro scritto jCarouselLite corrente e usarlo lo stesso.

Answer 4

Se si è in grado / autorizzati a modificare il codice del plugin:

Aggiungere una variabile per salvare l'intervallo id per i plugin di default

interval: null

Cerca:

if(o.auto)

Prendere il codice che viene eseguito qui e fare una funzione interna con esso come:

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

Ora basta salvare l'intervallo per la variabile definita ma cancellarlo prima:

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

Cerca la funzione go() nel plugin e aggiungere una runAuto(), in modo che ogni volta che la funzione viene chiamata go resetta l'intervallo.

Naturalmente è necessario aggiungere anche la chiamata alla runAuto() if(o.auto) così l'intervallo inizia in un primo momento.