jquery - 需要修改 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'); 
};

如果可行，请告诉我。

---

原始错误答案(留下来让评论有意义)
看起来你可以在 li 中替换 img 的 src ， .activeLI 在 after 回调函数(虽然我之前没有使用过 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');
        } 
    });
});

如果可行，请告诉我! (注意:如果这不起作用，请尝试从 after: function() 中的 curr 展开 $()...我说，以前没用过这个插件)