Question

我正在使用名为cycle2（http://jquery.malsup.com/cycle2/）的jQuery插件，我想在特定幻灯片处于活动状态时定位不同的元素。

简而言之，它是一张图片幻灯片，底部带有相应的图片作为导航栏。导航栏图像为黑白图像，但当幻灯片对该特定图像有效时，我希望导航栏以彩色显示。

循环滑块将一个名为cycle-slide-active的类应用于活动的幻灯片，然后在移动到下一张幻灯片后将其删除。

我可以通过使用脏无限循环来检查类与其分配的ID，如下所示：

function checkForChanges() {
    var slide = jQuery('.cycle-slide-active:first').attr('id');
    var active

    if ( slide == s1) {
        active = s1;
    } else if ( slide == s2 ) {
        active = s2;
    } else if ( slide == s3 ) {
        active = s3;
    } else if ( slide == s4 ) {
        active = s4;
    }

    jQuery('.celeb-button').css('opacity', 0);
    jQuery('.celeb-button-'+active).css('opacity', 1);

    setTimeout(checkForChanges, 500);
}

但是，我知道这样的无限循环是错误的，这也意味着我无法使用悬停效果将颜色带出来，因为无限循环会不断将不透明度更改回0。

我想添加一个事件监听器，以便在幻灯片循环中触发该函数，但我似乎无法针对此行为。

非常感谢任何想法。

Answer 1

您可以使用内置事件。我正在使用允许在没有代码的情况下初始化幻灯片的功能。

“opts”是包含很多值的哈希，要查看它们，您可以使用

在控制台中查看列表

console.log(Object.keys(opts));

opts.currSlide给出了幻灯片的索引。

在原始循环中，您可以通过简单地使用this.id获取当前幻灯片的ID，遗憾的是，这在循环2中不起作用。在使用索引时，我也无法可靠地获取当前ID幻灯片，所以我使用prev.id获取上一张幻灯片的ID，并相应地设置我的条件

如果您以编程方式初始化幻灯片，请将类名“.cycle-slideshow”更改为您的ID。这是一个单独的命令。我在幻灯片加载之前运行它，如果你希望它在幻灯片加载后立即运行，你也可以使用'cycle-after'。

您的代码看起来像这样：

$( '.cycle-slideshow' ).on( 'cycle-before', function( event, opts, prev, next) {
    if ( prev.id == s1) {//you are on the second slide
        active = s2;
    } else if ( prev.id == s2 ) {
        active = s3;
    } else if ( prev.id == s3 ) {
        active = s4;
    } else if ( prev.id == s4 ) {
        active = s1;
    }
});

Cycle2 Slider的事件监听器

1 个答案: