Question

我目前正在使用HTMl CSS和JS进行幻灯片演示，目前幻灯片下方的导航按钮只是放置数字而不是文本。有没有办法获取图像标题并使用它或每个幻灯片链接的自定义文本。下面我包含了制作导航按钮并添加文本的Javascript。如果您还有其他需要，请告诉我。

如果我可以在这个JS文件中指定可以正常工作的文本。

此外，如果它可能有助于我使用Kickstart HTML模板。链接以查看http://bliskdesigns.com/clients/timbr/

var items = $(this).find('li');
    wrap.append('<ul class="slideshow-buttons"></ul>');
    items.each(function(index){
        wrap.find('.slideshow-buttons')
        .append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+(index+2)+'</a></li>');
    });

Answer 1

很难给出一个简明的答案，但是：

假设您提供的代码：

items是一个包含幻灯片中每张幻灯片的数组;
items中的每个元素都包含img;
您希望在幻灯片导航中显示的文字是每个title的{{1}}属性;
由img构建的无序列表是导航;
您要更改的文字是注入wrap的每个项目的anchor内的数字。

这是一个潜在的答案：

wrap

这应该只是您项目中上面包含的代码来自的任何地方的直接替代。

正如我所说：我不能保证，如果没有更多的信息，这将有效，但理论上它会。确保您的每张图片都有标题：

// put all slides into 'items'
var items = $(this).find('li');

// append the wrap element with an unordered list
wrap.append('<ul class="slideshow-buttons"></ul>');

// loop over each item
items.each(function(index){
    // grab the title attribute of the img child of this instance of items
    var titleText = $(this).find('img').attr('title');  

    // push a new <li> into 'wrap'
    wrap.find('.slideshow-buttons').append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+titleText+'</a></li>');
});

或者，您可以使用图片的<img src="/link/to/image.kpg" alt="alternative text" title="text you want to appear in the slider navigation" >标记中的文字，而不是从上方更改此行：

alt

Answer 2

在列表项中，您可以添加要显示的文本而不是数字，如下所示。

<li data-displayText="Timber Mart"><a href="http://www.timbermart.ca/credit-card">  <img src="http://i.imgur.com/4XKIENA.png" width="920"  />   </a></li>

然后在上面的代码中，您可以使用文本而不是索引，如下所示。

wrap.find('.slideshow-buttons')
        .append('<li><a href="#slideshow-'+index+'" rel="'+index+'">'+$(items[index]).attr("data-displayText")+'</a></li>');

在Javascript中更改动态链接文本

2 个答案: