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;
}

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

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来显示空链接（没有数字）。

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

如果我没有写错字或其他错误，现在一切都应该正常。如果没有，请不要犹豫！

问候！

Jquery Cycle - 如何使用circle for pager？

1 个答案: