jcarousellite إعادة تعيين الفاصل الزمني Autoscroll

Question

كيف يمكنني إعادة ضبط الفاصل الزمني التلقائي على بلدي jcarousellite. كاروسيل بعد بعض الحدث بحيث يتيح لك إلقاء نظرة على المحتوى للفاصل الفاصل الكامل، بغض النظر عن مدى طول الموقت عند النقر فوق التالي أو السابق؟ الآن، إذا قمت بالنقر فوق التالي أو السابق بعد 9 ثوان، فاختر مرة أخرى بعد 1 ثانية.

في ال جامعة Jcarousellite شفرة المصدر عند الأسطر 274-277 هو المكان الذي يتم فيه تطبيق التمرير التلقائي باستخدام setInterval. وبعد أعلم أنه يمكنك استخدام clearInterval إذا كان لديك المعرف الذي تم إرجاعه بواسطة setinterval، ولكن لا يوجد واحد يمكنني الحصول عليها خارج تعديل التعليمات البرمجية المصدر، ولا أريد أن أفعل ذلك.

أيه أفكار؟ شكرا!

Answer 1

لا تقدم Jcarousellite نفسه أي طريقة سهلة لإيقاف التمرير التلقائي، وهي مشكلة أسهل ثم افعل ما يبدو أنك تريده (؟ هل فهمت هذا صحيحا: أنت فقط تريد أن تتوقف التلقائي التلقائي مؤقتا عند النقر ثم تابعها)

Hacky + Wouting Buggy طريقة لإيقاف التشغيل التلقائي تماما

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

---

حل حقيقي

كما لا يمكننا الحصول على Jcarousellite للقيام بذلك من تلقاء نفسها نحن محاكاة auto السلوك بنفسي.

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

إليك نسخة مع توقف مؤقتا على Mouseover المدمج. يعمل بشكل جيد.http://github.com/cheald/jcarousel-lite.

Answer 3

لم يكن أي من هذه الإجابات ما كنت أبحث عنه، لكن هذا هو ما يأتي عندما أقوم بتوقيت إعادة تعيين جوجل "جوجروسيليت"، لذلك بالنسبة للشخص التالي الذي يتطلع إلى:

• جعل إعادة تعيين الموقت عند النقر فوق أزرار الشريحة السابقة / التالية
• وقفة عرض الشرائح على تحوم

ثم هذا ما وضعته معا الذي يعمل بالنسبة لي:

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

فقط قم بتبديله باستخدام البرنامج النصي Jcarousellite الحالي واستخدامه فقط.

Answer 4

إذا كنت قادرا على تغيير رمز البرنامج المساعد:

أضف متغيرا لحفظ معرف الفاصل الزمني إلى الإضافات الافتراضية

interval: null

بحث عن:

if(o.auto)

خذ الكود الذي يتم تنفيذه هنا وجعل وظيفة داخلية معها مثل:

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

الآن فقط احفظ الفاصل الزمني لمتغيرك المحدد ولكن قم بإلغاء تحديده أولا:

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

البحث عن go() وظيفة في البرنامج المساعد وإضافة runAuto(), ، لذلك في كل مرة تسمى الوظيفة، يتم تعيينها إعادة تعيين الفاصل الزمني.

بالطبع يجب عليك أيضا إضافة runAuto() دعوة ل if(o.auto) لذلك يبدأ الفاصل في البداية.