需要修改JQuery Cycle updateActivePagerLink选项

Question

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

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

我该怎么做？我假设我需要通过修改 updateActivePagerLink 函数在 updateActivePagerLink 选项中执行某些操作，该函数取自 http://www.malsup.com/jquery/cycle/pager7.html：

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

让我知道这是否有效。

---

Original wrong answer (leaving it in so the comments make sense)
It looks like you can replace the src of the img within whichever li has the class .activeLI inside the after callback function (though I haven't used the Cycle plugin before and am just gleaning that last bit from the docs).

因此，将 Cycle 代码更改为：

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

让我知道这是否有效！ （注意：如果这不起作用，请尝试从 after: function() 中的 curr 中解开 $()... 就像我说的是，以前没用过这个插件）