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

Question

我对轨道滑块有一些问题。我想用自定义标签做我自己的 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 slider 生成“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 标签并更改幻灯片图像？

请帮忙:)

Answer 1

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

var liMarkup = $('

'+(i+1)+'

');

To：

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

其中 YOUR_SLIDESHOW_WRAPPER_DIV 是您调用插件的 div（如果您使用的是演示代码，则为“精选”）。

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

1. 文本缩进：-9999px；需要删除，以便 alt 标签中的文本可见。
2. li 标签的宽度和高度需要设置为适合您的 alt 标签的宽度和高度。
3. 除非您删除该 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>