Question

我正在创建自己的响应式JavaScript / jQuery滑块。它似乎在大多数情况下工作非常棒，但是，当我点击箭头或导航圈时，超时/动画似乎有问题。这不一致。单击箭头/导航圆圈时，它应该只重置超时并转到相应的幻灯片。

例如，如果您在到达最后一张幻灯片时单击导航圈，它会立即快速返回到第一张幻灯片，而不会暂停5000。

以下是所有代码的小提琴：http://jsfiddle.net/23712cwb/2/

为什么时机会像那样烦恼？我如何解决它？正如您所看到的，我将clearTimeout($timeout);添加到nextSlide()函数的顶部，但这并没有完全解决它，我不确定这是解决问题的正确方法。但是，在我添加这行代码之前，它更加错误。

如果有人有任何提示，他们可以给我或建议如何使这更好，这将是很棒的。我对jQuery插件并不是很熟悉，所以我只是想把它放在这里。

Answer 1

我明白了。此代码导致了此问题：

    $('.slider .slides li .caption, .slider .slide-arrows li, .slider .slide-nav').mouseout(function () {
        $timeout = setTimeout(function () { nextSlide('right', $slides, $height, $caption_speed, $slide_speed, 'null'); }, $slide_speed);
    });

因此，每当我将鼠标从箭头或导航或标题上移开时，它就会加倍执行nextSlide功能。

我删除了该代码，现在它都是肉汁。

Answer 2

实际上，您的代码并不适用于Firefox，因为他对Chrome的错误不如Chrome。

您应该定义在$（document）.ready block

之外使用的captionActive和nextSlide函数

在你的例子中，它在控制台上给了我这个错误：

 captionActive is not defined

Working fiddle

编辑：我想你应该小心$ timeout的范围：当你在块document.ready和函数中使用它时，你应该使用全局变量并使用窗口。$ timeout而不是$ timeout

这可能会解决您的一些问题。

当我点击箭头/导航时，自定义jQuery / JavaScript Slider会出现问题

2 个答案: