jQuery Cycle - 构建自定义寻呼机

Posted 2023-02-26

【中文标题】jQuery Cycle - 构建自定义寻呼机

【英文标题】：jQuery Cycle - building a custom pager

【发布时间】：2012-01-07 09:28:16

【问题描述】：

一个相对（我希望）简单的jQuery问题：

我有一个菜单：

<ul id="menu" style="list-style:none">
    <li><a href="#asics">ASICS</a></li>
    <li>/</li>
    <li><a href="#plants">PLANTS PLUS</a></li>
    <li>/</li>
    <li><a href="#tooheys">TOOHEYS</a></li>
    <li>/</li>
    <li><a href="#olympics">OLYMPICS</a></li>
    <li>/</li>
    <li><a href="#panadol">PANADOL</a></li>
    <li>/</li>
    <li><a href="#kia">KIA CADENZA</a></li>
</ul>

菜单控制一个滑块（代码不是必需的，只是标准的循环 div。这是代码，取自jQuery Cycle Plugin Pager Tutorial：

var slider = new Swipe(document.getElementById('slider'));
$('#adSlideshow').cycle( 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0,  
    pager:  '#menu',
    pagerAnchorBuilder: function(idx, slide)  
        // return selector string for existing anchor 
        return '#menu li:eq(' + idx + ') a'; 
    
);

如您所见，在我的菜单中，每个链接（带有标签的链接）都与寻呼机相关；每个 <li>/</li> 项目只是每个链接项目之间的间隔。如何编辑寻呼机代码以使其仅使用正确的 <li> 项目？

这里有一个 jsFiddle 来更好地说明我的意思：http://jsfiddle.net/y4Qfw/12/

【参考方案1】：

不要使用<li>/</li> 作为间距.. 使用另一个元素，或者更好地删除它们并使用以下 CSS 规则：

#menu li 
    margin-bottom: 30px;

例如：http://jsfiddle.net/y4Qfw/13/

将元素用于它们的用途

【讨论】：

干杯。我应该更具体；对于有问题的用法，分隔符位于水平菜单中，我希望它们在每个 <li> 项目之间均匀浮动，即使调整页面大小也是如此。 Here is the question from this morning 和 here is the site it's being implemented on。如果您能提出更好的方法，将不胜感激。

我建议了一个更好的方法 - 如果它会影响您的滑块，请不要使用 <li> 来实现间隔 - 尝试将 <li>/<li> 替换为 <span> 并看看这对您有什么影响滑块 - 如果是这样，您可以像 <li>/</li> 一样设置 <span> 的样式

啊，没想到会这么简单。其他问题中的其他海报提到，在<ul> 中使用<li> 以外的任何东西都是不好的做法，但认为你的方式更好。让他们<span>s 工作是一种享受，干杯伙伴。