jquery - 需要修改 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>

我怎样才能做到这一点？我假设我需要通过修改 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'); 
};

让我知道这是否有效。

原错答案 (把它留在里面，这样评论才有意义)
看来您可以替换 src的img在 li 中有类.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');
        } 
    });
});

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