Question

我正在创建一个简单的3张图片幻灯片，我对Jquery和Cycle很新。我有幻灯片显示工作，有3个寻呼机链接也可以工作。

我唯一需要做的就是，在当前选择的寻呼机图像中添加“activeSlide”功能，我只能通过使用activeSlide类在CSS中做不到...因为我想更改活动寻呼机的图像source ...虽然如果它只是默认的简单文本数字，我会设置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 code：

<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

编辑：显然，由于我不熟悉该插件，我的原始答案无效。但是，既然你找到了部分功能，我会在这里用一个完全可行的解决方案来更新答案。除了你发现的功能之外，所有你需要做的就是将它们全部改为'off'（第1行），然后将活动的一个改为'on'（你添加的内容）。

$.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回调函数中的

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

类$()之前的循环插件只是gleaning that last bit from the docs）。

因此，请将周期代码更改为：

curr

让我知道这是否有效！（注意：如果这不起作用，请尝试从after: function()中的{{1}}中解开{{1}} ...就像我说的那样，之前没有使用过这个插件。

需要修改JQuery Cycle updateActivePagerLink选项

1 个答案: