Question

我需要创建一个带有一些复杂导航功能的滑块。

这是似乎不起作用的代码：

$('#bulletLooper').on('shown', function (e) {
 $('.looper-nav > li', this)
   .removeClass('active')
   .eq(e.relatedIndex)
   .addClass('active');
});

关于jsfiddle的完整示例：

http://jsfiddle.net/Laurent514/N3Wgp/17/

我需要做的是在颜色指示器框和与活动幻灯片关联的颜色选择器框上设置活动类。 JS脚本在导航缩略图上工作正常，但似乎不支持向多个元素添加活动类，或者我可能以错误的方式执行此操作。用于设置活动类的JS脚本位于JS小提琴JS窗口的末尾。

任何人都可以帮助我吗？

谢谢！

劳伦

Answer 1

我认为这就是你要找的东西？

http://jsfiddle.net/N3Wgp/18/

所做的更改：

首先 - 由于同一个选择器可以轻松地用于所有3个列表，我停止使用.eq并使用.filter和nth-child选择器 - 这允许从所有3个.looper-nav列表中选择li元素来给它们活动类，并且还停止将选择器作用于.looper.slide对象 - 所有操作都是通过对底部JS的一些小改动来完成的。

$('#bulletLooper').on('shown', function (e) {
    $('.looper-nav > li')
        .removeClass('active')
        .filter(':nth-child('+(e.relatedIndex+1)+')')
        .addClass('active');
});

第二 - 一些小的CSS规则应用颜色指示器的显示更改现在它有活动类可用。只需将其添加到CSS的末尾即可。

.color-indicator .looper-nav > li {
    display: none;
}
.color-indicator .looper-nav > li.active {
    display: inline-block;
}

具有复杂导航的图像滑块

1 个答案: