2

我正在创建一个简单的 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'); 
};

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

4

1 回答 1

0

编辑：显然，由于我不熟悉插件，我原来的答案没有奏效。但是，由于您发现了部分可行的内容，因此我将在此处使用应该完全有效的解决方案来更新答案。除了您发现的内容之外，您所要做的就是在该函数的开头将它们全部更改为“关闭”（第 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).

So change the Cycle code to:

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

And let me know if that works! (Note: if this doesn't work try unwrapping the $() from the curr in the after: function()... like I said, haven't used this plugin before)

于 2010-06-04T19:06:52.057 回答