Cycle2 滑块的事件监听器答案

【问题标题】：Event Listener for Cycle2 SliderCycle2 滑块的事件监听器
【发布时间】：2015-07-17 04:15:22
【问题描述】：

我正在使用一个名为 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。

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

任何想法将不胜感激。

【问题讨论】：

标签： javascript jquery addeventlistener event-listener cycle2

【解决方案1】：

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

“opts”是一个包含很多值的哈希，要查看它们，您可以使用控制台查看列表

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

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

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

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

您的代码将如下所示：

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

【讨论】：