Cycle2滑块的事件侦听器
我使用的是一个名为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。
我想添加一个事件侦听器，以便在滑动周期中触发该函数，但我似乎不能针对此行为。
任何想法都将不胜感激。
回答 1
Stack Overflow用户
发布于 2015-06-17 05:12:03
您可以使用内置事件。我使用的功能允许在没有代码的情况下初始化幻灯片。
"opts“是一个包含相当多值的散列，要查看它们，可以在控制台中使用以下命令查看列表
console.log(Object.keys(opts));opts.currSlide给出了幻灯片的索引。
在最初的周期中，您可以通过简单地使用this.id来获取当前幻灯片的id，不幸的是，这在周期2中不起作用。在使用幻灯片的索引时，我也无法可靠地获取当前id，因此我使用prev.id来获取前一张幻灯片的id，并相应地设置了我的条件
如果您正在以编程方式初始化幻灯片，请将类名“.ycle- 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;
}
});https://stackoverflow.com/questions/30086689
复制相似问题
腾讯云开发者
