javascript - Jquery Cycle 插件问题 - 更改和样式链接

Question

好的，我有这个东西在工作。翻转链接，它会更改横幅/图片。极好的。问题是:如何将文本从 1,2,3... 更改为我想要的任何内容？此外，如何应用背景图像、悬停和主动处理。在 http://malsup.com/jquery/cycle/pager5.html 的示例中，我正在使用 #nav a {blah, blah} 来影响黄色框和边框，但是当我添加图像时它什么也不做。此外，更改文本的能力似乎隐藏在实际的 Cycle 插件中。有人知道怎么做吗？

这是我的代码

JavaScript:

$('#slideshow').cycle({ 
    speed:      200,
    timeout:    0, 
    pager:      '#tabs', 
    pagerEvent: 'mouseover' 
});

CSS(图像未显示思想)

#tabs a {
    border-style: none;
    height: 47px;
    width: 192px;
    background-image: url(../images/tabback.png);
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background: none no-repeat scroll 0 0;
    text-decoration:none;
}

并且 HTML 并不是那么重要，但我在@tabs 处吐出导航链接。

Answer 1

要更改寻呼机的文本，请在 options 中为 pagerAnchorBuilder 回调提供一个函数.参数是页码和 DOM 元素。默认 anchor 是 '<a href="#">'+(i+1)+'</a>' .例如，您可以使用:

$('#slideshow').cycle({ 
    speed:      200,
    timeout:    0, 
    pager:      '#tabs', 
    pagerEvent: 'mouseover',
    options:    {
        pagerAnchorBuilder: function(i,el) {
            return '<a href="#">Page '+(i+1)+'</a>';
        }
    }
});

我不确定背景图像，但看起来后面的背景属性覆盖了背景图像。是否background: none url(../images/tabback.png) no-repeat scroll 0 0;为你改变什么？