需要修改 JQuery Cycle updateActivePagerLink 选项

Question

我正在创建一个简单的 3 图像幻灯片放映，而且我对 Jquery 和 Cycle 还很陌生。我的幻灯片工作正常，有 3 个寻呼机链接也可以工作。

我唯一需要完成的是，将“activeSlide”功能添加到当前选定的寻呼机图像中，这在 CSS 中无法通过简单地使用 activeSlide 类来完成...因为我想更改活动寻呼机的图像来源...如果默认情况下只是简单的文本数字，我会设置 activeSlide 类的样式。

基本上，当到达活动的幻灯片寻呼机时，我想将 test-select-off.jpg 与 test-select-on.jpg 交换。

循环码：

$(function() {
    $('#testimonial-features').cycle({  
        speed: 800,
            timeout: '6500',
            pause: 'true',
            pager: '#testimonial-switcher',
            pagerAnchorBuilder: function(idx, slide) { 
             return '#testimonial-switcher li:eq(' + idx + ') a';       
            } 
    });
});

HTML 代码：

<div id="testimonial-switcher">
<ul>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
</ul>

我该怎么做？我假设我需要通过修改来自http://www.malsup.com/jquery/cycle/pager7.html 的 updateActivePagerLink 函数来在 updateActivePagerLink 选项中做一些事情：

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('li').removeClass('activeLI') 
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
}; 

但就像我说的，我仍在学习这种语法，所以任何帮助将不胜感激！

Answer 1

编辑：显然，由于我不熟悉该插件，因此我的原始答案不起作用。但是，由于您找到了部分可行的方法，因此我将在此处更新答案，并使用应该完全有效的解决方案。除了您发现的之外，您所要做的就是在该函数的开头将它们全部更改为“关闭”（第 1 行），然后将活动的更改为“打开”（您添加的内容）。

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('img').attr('src','images/layout/test-select-on.jpg');
    $(pager).find('li').removeClass('activeLI') 
            .filter('li:eq('+currSlideIndex+')').addClass('activeLI')
            .find('img').attr('src','images/layout/test-select-on.jpg'); 
};

让我知道这是否有效。

---

原来的错误答案（保留它以便 cmets 有意义）
看起来您可以替换 img 中的 src 中的 li 在 after 回调函数中具有 .activeLI 类（尽管我之前没有使用过 Cycle 插件，我只是 gleaning that last bit from the docs )。

因此将循环代码更改为：

$(function() {
    $('#testimonial-features').cycle({  
        speed: 800,
        timeout: '6500',
        pause: 'true',
        pager: '#testimonial-switcher',
        pagerAnchorBuilder: function(idx, slide) { 
         return '#testimonial-switcher li:eq(' + idx + ') a';       
        },
        after: function(curr, next, opts) {
         $(curr).find('img').attr('src','images/layout/test-select-on.jpg');
        } 
    });
});

如果可行，请告诉我！ （注意：如果这不起作用，请尝试将 curr 中的 $() 解包到 after: function()... 就像我说的那样，以前没有使用过这个插件）