javascript - 带有 JQuery 修复的内容旋转器 : how to scroll each thumbnail and not set?

Question

http://tympanus.net/Development/ContentRotator/example2.html

目前，此内容 slider 允许您在单击箭头时每 4 个缩略图(一组)滚动一次。我怎样才能让点击箭头移动到下一个缩略图？

此外，它目前处于自动播放状态，但一旦您点击缩略图，它就会停止。如何让它在被点击中断后继续自动播放？

这是教程页面:http://tympanus.net/codrops/2011/07/29/content-rotator/

Answer 1

slider 的脚本可以在这里找到: http://tympanus.net/Development/ContentRotator/js/jquery.crotator.js

这不是一个写得很好的插件，不幸的是脚本本身不允许自定义(即你不能传递选项列表)。没有阻止它在交互时停止的选项。要实现您想要的效果，您需要编辑代码。

我查看了代码，只要变量 config.slideshow = true， slider 就会继续工作。但是，有许多事件绑定(bind)具有无条件将值设置为 false 的代码。例如

$navNext.bind('click.crotator', function(e) {
    ...
    config.slideshow    = false;
    ...
}

您可以删除值设置为 false 的代码，这样可以解决您的问题。但是，由于您要接触代码，所以最好让插件接受选项。您可以让它允许像“stopOnInteraction”这样的选项，它基本上在事件处理程序中执行以下行:

if (config.stopOnInteraction) {
    config.slideshow = false;
}