当我到达页面上的特定元素时，如何在 jQuery Cycle2 插件中更改数据周期的值？

Question

我在 this page 上有一个 jQuery Cycle2。使用 data-cycle-paused="true" 我可以无限期地暂停幻灯片。

我需要做的是在用户到达页面上的那个点时将 data-cycle-paused="true" 更改为 data-cycle-paused="false" 以便动画开始。

我已经搜索了 API 文档以及许多其他来源，但我找不到任何有关进行此类更改以触发滑块的信息。

Answer 1

我在 documentation 中找到了以下解决方案。 Commands 区倒数第二个

resume - 恢复暂停的幻灯片。

$('.cycle-slideshow').cycle('resume');

希望这就是您要找的东西。

编辑：请尝试以下解决方案，请注意它仅适用于您网站上的第一个) 幻灯片：

$(window).scroll(function(){
    var animatedElement = document.getElementsByClassName('cycle-slideshow')[0],
        animatedElementPosition = animatedElement.offsetTop,
        animatedElementHeight = animatedElement.offsetHeight,
        currentScrollPosition = window.pageYOffset,
        resumed = false;

    if( (currentScrollPosition >= animatedElementPosition) &&
        (currentScrollPosition <= animatedElementPosition + animatedElementHeight ) ){
        if(!resumed){
            $('.cycle-slideshow').cycle('resume');
            resumed = true;
        }
    } else {
        if(resumed){
            $('.cycle-slideshow').cycle('pause');
            resumed = false;
        }
    }
});

编辑 2：当我在您的网站上运行脚本时出现以下错误：

Uncaught TypeError: $(...).cycle is not a function

这可能意味着，由于 jQuery 没有包含一次，但更多。

是的，在你的 html:

<script src="js/jquery-2.0.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

如果您确定删除第二个不会对您的网站功能产生影响，例如。 另一个插件可能需要这个旧版本jquery，然后删除它！ :) 应该可以。

P.S。请注意，当您向下滚动到向上时，您的动画会比它应该出现的更快，因为 "cycle-slideshow" 高度比我看到的图像大得多。

Answer 2

您可以为 scroll 事件创建事件处理程序（https://api.jquery.com/scroll/) and in it use any method of detecting whether your slideshow appears into view from here: Check if element is visible after scrolling

检测到外观后就做

$('.cycle-slideshow').cycle('resume');

当我到达页面上的特定元素时，如何在 jQuery Cycle2 插件中更改数据周期的值？

How to change the value of a data-cycle in jQuery Cycle2 plugin when I get to a specific element on a page?

jquery

jquery-cycle2