jcarousellite 点击停止

Question

你好 我有一个包含 jcarousellite 的页面，显示一些图像并每 5 秒自动滚动一次，当我单击轮播中的任何图像时，我想停止滚动，

这就是我想要做的

$(document).ready(function() {
    $('.slider_images').jCarouselLite({
        btnNext: "#next",
        btnPrev: "#prev",
        auto:  3000         
    }); 

    $(".slider_images img").click(function(){


        $('.slider_images').jCarouselLite({
            btnNext: "#next",
            btnPrev: "#prev",
            scroll: false       
        }); 


    });
});

Answer 1

我很抱歉这么晚才回复。我的问题解决了。我们可以通过改变jcarousellite的pauseOnHover选项很容易地实现点击停止属性。如果你看到pauseOnHover的实现，它是这样的：

o.pauseOnHover ? ul.hover(function (){ paused == 1 }, function (){paused=0}) : "";

我们可以通过将ul.hover更改为ul.click来实现点击停止

o.pauseOnHover ? ul.click(function (){ paused == 1 }, function (){paused=0}) : "";

。祝你有美好的一天。

Answer 2

我读了一会儿代码，发现自动滚动是通过使用setTimeout实现的：

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

如果你第二次使用jCarouselLite，它不会停止>设置超时。要停止 setTimout，您必须调用 window.clearTimeout：

var timeoutId = window.setTimeout(function(){...}, 100);

window.clearTimeout(timeoutId);

这是不可能的，因为 jcarousel 的代码没有为您提供这些 timeoutId。您可以与开发人员交谈或自行修改代码。

Answer 3

我想不同意 scheffield 和/或找到使用此插件的解决方案，但我必须同意他的观点- 需要重写源代码才能完成您想要的操作。或者，您可能需要考虑 jquery 循环。它已经有“暂停”和“停止”方法。

Answer 4

的顶部

var timers = new Array();

将其添加到文件更改

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

以

timers.push(new Array( this.className, setInterval(function(){go(curr+o.scroll)},o.auto+o.speed)));

停止滚动

var classToStop = ".TestClass"; 

for(var i=0; i < timers.length; i++)
{
    if("."+timers[i][0] == uploadifyClass)
    window.clearInterval(timers[i][1])
}

Answer 5

这将停止页面上的所有轮播自动前进。我正在杀死这里使用超时的所有内容。这对我有用：

$(".slider_images img").click(function(){
    var x = setTimeout("");
    for (var i = 0 ; i < x ; i++)
    clearTimeout(i);
}

Answer 6

$(".mycarousel").trigger('stopCarousel');

如果您使用的是最新的 jcarousel https://github.com/kswedberg/jquery-carousel- lite/

由于某种原因，此事件不在他们的文档中，尽管暂停Carousel 是。