JCAROUSELLITE AUTOSCROLL 간격을 재설정합니다
-
16-09-2019 - |
문제
내에서 자동 스크롤 간격을 재설정하려면 어떻게해야합니까? Jcarousellite 이벤트 후 회전식 이벤트 후에 다음 또는 이전을 클릭했을 때 타이머를 얼마나 멀리 떨어져 있는지에 관계없이 전체 간격에 대한 내용을 볼 수 있습니까? 지금, 9 초 후에 다음 또는 이전을 클릭하면 1 초 후에 다시 스크롤됩니다.
에서 Jcarousellite 소스 코드 274-277 행은 자동 스크롤이 구현되는 곳입니다. setInterval
. 나는 당신이 사용할 수 있다는 것을 알고 있습니다 clearInterval
SetInterval에 의해 ID를 반환 한 경우 소스 코드를 수정하지 못하면 ID가 없으면 그렇게하고 싶지 않습니다.
어떤 아이디어? 감사!
해결책
Jcarousellite 자체는 자동 스크롤링을 중지하는 쉬운 방법을 제공하지 않습니다. 이는 더 쉬운 문제이며 원하는 것과 같은 작업을 수행합니다 (?이 권리를 이해 했습니까?
Hacky + Autoscroll을 완전히 막을 수있는 버그가 많은 방법
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);
});
});
다른 팁
다음은 마우스 오버 내장에 일시 정지 된 버전입니다. 잘 작동합니다.http://github.com/cheald/jcarousel-lite
이 답변 중 어느 것도 내가 찾고 있던 것이 아니었지만, 이것이 'JCarousellite Reset 타이머'를 Google에 올 때 다음 사람이 다음과 같이 생각합니다.
- 이전/다음 슬라이드 버튼을 클릭하면 타이머를 재설정합니다.
- 호버의 슬라이드 쇼를 일시 중지하십시오
그러면 이것이 제가 함께하는 것입니다.
(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 스크립트로 교체하고 동일하게 사용하십시오.
플러그인 코드를 변경할 수 있거나 권한이있는 경우 :
플러그인 기본값에 간격 ID를 저장하려면 변수 추가
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)
따라서 간격은 처음에 시작됩니다.