javascript - Flexslider (jQuery)：暂停自动动画

Question

我正在使用出色的 jQuery 插件Flexslider在网页上创建轮播。除了一件事之外，这一切都完美无缺：我希望滑块在用户单击页面上其他位置的给定链接时自动停止动画。

这甚至可能吗？

Answer 1

当单击页面上其他位置的特定链接时，您希望滑块停止。假设链接具有“some-link”类，并且还假设您的 flexslider 具有“flexslider”类，在这种情况下，您可以使用以下 JS 片段：

$('.some-link').click(function() { $('.flexslider').flexslider("pause"); });

您需要确保代码位于 a$(document).ready(function() { ... })中，或者脚本位于页面上的 html 下方，该页面具有“some-link”类的链接。否则，添加该点击事件的选择器将不匹配任何内容（因为它还不存在）。

顺便说一句，@Guern 的解决方案包含有关如何实际暂停 flexslider 的最重要信息，但您的问题是要求再迈出一步。尽管已经 2 岁了，但我现在正在回答这个问题，因为它出现在谷歌搜索中。

Answer 2

当然有可能。
在此示例中，当您单击幻灯片时它会停止，只需将单击事件绑定到您喜欢的页面链接。

$('.flexslider .slides > li').click(function() {
    $('.flexslider').flexslider("pause");
});

Answer 3

在该 jQuery 插件的函数列表中，有：

slider.pause()                //Function: Pause slider slideshow interval

不确定，但我认为您可以使用此功能来停止效果，如下所示：

$(#elm).flexslider().pause();

您可以在其网页上的高级选项卡中查看包含 flexslider 插件属性的列表。