Question

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

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

我搜索过API文档以及其他许多来源，我找不到任何关于进行这种更改来触发滑块的信息。

Answer 1

我在documentation找到了以下解决方案。在$('element').mouseover(function () { var classList = $(this).attr('class').split(' '); classList.forEach(function (clss) { if (clss.indexOf('darken') > -1) { var color = clss.split('-')[0]; var desiredNumber = clss.split('-')[1] + 1; $(this).removeClass(clss).addClass(color + '-' + desiredNumber); } else if (clss.indexOf('lighten') > -1) { var color = clss.split('-')[0]; var desiredNumber = clss.split('-')[1] - 1; $(this).removeClass(clss).addClass(color + '-' + desiredNumber); } }); })部分后面的第二个。

resume - 恢复暂停的幻灯片演示。

Commands

希望这是你想要的。

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

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

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

$(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;
        }
    }
});

这可能意味着，由于jQuery不存在问题一次，但更多。

是的，在你的HTML中：

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

如果您确定删除，则第二个不会对您的网站功能产生影响，例如： 其他插件可能需要 旧版版 jquery ，然后将其删除！ :)应该工作。

P.S。请注意，当您向下滚动到上方时，您的动画将显得更快，因为“循环幻灯片”高度比我看到的图像大得多。

Answer 2

您可以为scroll事件（https://api.jquery.com/scroll/）创建事件处理程序，并在其中使用任何方法检测您的幻灯片是否从此处显示在视图中：Check if element is visible after scrolling

检测到外观时，只需

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

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

2 个答案: