Jquery Cycle 插件问题 - 更改和样式化链接答案

【问题标题】：Jquery Cycle Plugin Question - Changing and styling linksJquery Cycle 插件问题 - 更改和样式化链接
【发布时间】：2010-01-15 04:22:03
【问题描述】：

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

这是我的代码

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 处吐出导航链接。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

要更改寻呼机的文本，请在options 中为 pagerAnchorBuilder 回调提供一个函数。参数是页码和 DOM 元素。默认锚点是'<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; 对你有什么改变吗？

【讨论】：

谢谢。有什么办法可以用实际的 pageAnchorBuilder 语法更新你的答案，这样我就知道该放什么了。 Javascript 新手。

【解决方案2】：

这些记录似乎都不起作用，所以我稍微修改了一下。只需隐藏#tabs img 标签，使用#tabs、#tabs a 和#tabs a:hover 即可获得我想要的效果。然后在标签内创建了一个 div，绝对可以获取我想要的唯一文本。最后，更改 #tabs a:activeSlide 以匹配 #tabs a:hover 以消除悬停在 div 上但在文本上时闪烁。

【讨论】：