jquery - 需要修改 JQuery Cycle updateActivePagerLink 选项

原文 标签 jquery html css jquery-plugins jquery-cycle

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

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

最佳答案

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

让我知道这是否有效。

原错答案 (把它留在里面,这样评论才有意义)
看来您可以替换 srcimgli 中有类.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() ......就像我说的,之前没有使用过这个插件)

关于jquery - 需要修改 JQuery Cycle updateActivePagerLink 选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2975643/

相关文章:

javascript - 如何在悬停上放置覆盖以在 flex 容器中 flex 元素

html - CSS 选择器,HTML 标记,我错过了什么?

javascript - HTML Checkbox Click()使用jQuery返回FALSE或TRUE,而不是READONLY或DISABLED

html - 在较小的屏幕上更改网格元素的顺序

javascript - 如何使用pickadate js通过单击前一天/后一天按钮来更改日期

javascript - 单指滚动网页 - 什么技术?工作示例?

javascript - 如果选中单选按钮,如何获取单选按钮的文本?

php - FrontPage幻灯片无法在Firefox中使用

javascript - 在打印对话框上运行JQuery或打印预览

css - @fontface在IE中显示之前默认字体的闪烁