自己的幻灯片菜单/轨道滑块答案

【问题标题】：Own slide menu / orbit slider自己的幻灯片菜单/轨道滑块
【发布时间】：2011-07-30 16:27:22
【问题描述】：

我对@987654321@ 有一些问题。我想用自定义标签做我自己的 html 项目符号菜单，如下所示：

<div id="thumblist">
    <ul>
        <li data-tags="group1"><img alt="1" src="thumbs/nameqq.png" /></li>
        <li data-tags="group1"><img alt="2" src="thumbs/nameww.png" /></li>
        <li data-tags="group1"><img alt="3" src="thumbs/nameee.png" /></li>
    </ul>
</div>

但 Orbit 滑块生成了“li”标签（带有数字）。

这是此插件中的项目符号部分：

//Bullet Nav Setup
if(options.bullets) { 
    var bulletHTML = '<ul class="orbit-bullets"></ul>';             
        orbitWrapper.append(bulletHTML);
        var bullets = $('ul.orbit-bullets');

        for(i=0; i<numberSlides; i++) {
            var liMarkup = $('<li>'+(i+1)+'</li>');

            $('ul.orbit-bullets').append(liMarkup);
            liMarkup.data('index',i);
            liMarkup.click(function() {
            stopClock();
            shift($(this).data('index'));
            });
        }
        setActiveBullet();
}

那么，如何更改这个 JS，它会从 img 中获取 alt 标签并更改幻灯片图像？

请帮忙:)

【问题讨论】：

请为不知道您在说什么的人解释并链接到“轨道滑块”。
zurb.com/playground/orbit-jquery-image-slider

标签： jquery jquery-plugins menu slider

【解决方案1】：

如果您想从数字更改为 alt 标签，您可以更改以下行：

var liMarkup = $('<li>'+(i+1)+'</li>');

收件人：

var liMarkup = $('<li>' + $('#YOUR_SLIDESHOW_WRAPPER_DIV').children().eq(i).attr('alt') + '</li>');

YOUR_SLIDESHOW_WRAPPER_DIV 将是您调用插件的 div（如果您使用的是演示代码，则为“特色”）。

出于几个关键原因，您还需要更改 CSS。

文本缩进：-9999px；需要删除，以便 alt 标记中的文本可见。
li 标签的宽度和高度需要设置为您的 alt 标签可以容纳的值。
除非您删除该 css 属性，否则背景仍将显示一个点。

注意：这是为上述 css 更改更改的声明：.orbit-bullets li

另一个注意事项：如果您在幻灯片中的图像（或内容）周围使用或标记，您应该在它们上设置 data- 属性，而不是依赖于其中图像上的 alt 标记。如果你这样做，你需要在上面的代码示例中将attr('alt') 更改为attr('data-alt')。例如：

<div id="featured">
    <a data-alt="this is an alt tag of sorts"><img src="..."></a>
    <img data-alt="yet another data-alt tag" src="...">
    <div data-alt="third and final data-alt tag"><img src="...">some text on this one too</div>
</div>

【讨论】：