Question

Orbit slider我遇到了一些问题。我想用自定义标签做我自己的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标签并更改幻灯片图像？

请帮助：）

Answer 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，原因有几个。

text-indent：-9999px;需要删除，以便显示alt标记中的文本。
li标签的宽度和高度需要设置为alt标签适合的范围。
除非删除该css属性，否则背景仍将显示一个点。

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

另一个注意：如果您在幻灯片中使用或标记图像（或内容），则应在其上设置数据属性，而不是依赖其中图像上的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>

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

1 个答案: