Jquery Cycle - 如何使用循环进行寻呼？

Question

让我的寻呼机在 jquery 周期中看起来正确时遇到问题。 以下代码

$(document).ready(function() {
    $('#slider_container')
    .after('<div id="pager">')
    .cycle({
    fx: 'scrollRight',
    speedIn: 400,
    speedOut: 200,
    timeout: 10000,
    pause: 1,
    delay: -4000,
    easeIn:  'easeInCirc',
    sync: false,
    pager: '#pager',
    pagerAnchorBuilder: function(idx, el) {
        return '<li><a href="#"><img src="images/grey_dot.png" width="10" height="10" /></a></li>';
        }
    });
});

让我将图像显示为导航而不是数字，但问题是我希望能够为活动幻灯片提供不同颜色的圆圈。

我尝试将 img 位保留在 pageAnchorBuilder 之外，并在 CSS 中使用 backgrounf:(url) 并在 .activeSlide 上使用不同的一个，但无济于事。

将不胜感激任何人的帮助，谢谢。

Answer 1

我知道你说过你已经尝试过通过 css 设置它们的样式但没有成功？但理论上它应该有效。我想你应该再试一次。

示例：

#pager a{
    display:block;
    background:url(pagerBg.png) no-repeat;
}
#pager a.activeSlide{
    background:url(activePagerBg.png) no-repeat;
}

这适用于我的本地主机。理想情况下，您可以使用页面锚构建器来隐藏数字：

pagerAnchorBuilder: function(idx, el) {
    return '<a href="#"></a>';
    }

我希望这会有所帮助！

编辑：

首先。以下是有关其工作原理的演示： http://jsfiddle.net/Lywtt/1/

现在，您应该尝试以下操作：

- 完全删除锚构建器

删除锚构建器后，您确实会看到带有幻灯片数量的简单链接，对吧？比如“123”

- 接下来我们要做的是设置此链接的样式，因此在 css 中添加以下内容：

#pager{
    width:200px;
    margin-top:5px;
    border:1px solid blue;
    text-align:center;
}
#pager a{
    display:inline-block;
    width:20px;
    margin-left:5px;
    background:green;
}
#pager a.activeSlide{
    background:yellow;
}

显然，上面的大多数样式仅用于演示目的，一旦一切按您希望的方式工作，就可以将其删除。

这在理论上必须有效，但是如果仍然不起作用，请重新链接您更新的网站（没有锚构建器并使用新样式），我们可以再次检查。

编辑2：

很高兴听到它有效！现在使用图像而不是绿色和黄色（用于活动幻灯片）块非常容易。让我们再次从演示开始： http://jsfiddle.net/Lywtt/2/

我们需要什么要做的事情如下：

只需将 css 替换为如下内容：

#pager a{
    display:inline-block;
    width: 20px; /* width of the image */
    height: 20px; /* height of the image */
    margin-right:5px; /* space between the images */
    background:url(pagerBg.png) no-repeat;
}
#pager a:last-child{
    margin-right:0; /* we need no space after the last pager link */
}
#pager a.activeSlide{
    background:url(activePagerBg.png) no-repeat;
}

如您所见，我们只需将 background:green; 和 background:yellow; 替换为相应的图像。当然，您必须调整图像的链接以匹配您的网站结构。

您现在应该看到以图像为背景的数字，而不是绿色和黄色背景。

作为最后一步，我们要删除这些数字。为此，我们必须再次在脚本中插入一个简单的anchorBuilder：

pagerAnchorBuilder: function(idx, el) {
    return '<a href="#" title="Slides"></a>';
    }

您会看到我们插入了一个简单的anchorBuilder来显示空链接（没有数字）。

现在您应该只能看到没有数字的图像。

如果我没有犯错或其他错误，现在一切都应该正常。如果没有，请毫不犹豫地说出来！

问候！