Question

我正在尝试将下面示例中的数字导航更改为实际的文本链接。

因此'1'可以是'Football'，'2'可以是'Ice Hockey'，依此类推......

如何使用NivoSlider代码实现此目的？

我已将代码移至JSFiddle：http://jsfiddle.net/JSNuU/，以防更有帮助。

我真的很感激这方面的一些帮助。

Answer 1

不幸的是，除了用一系列图像替换它之外，Nivo不提供控制导航的钩子。这些数字是硬编码的：

nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');

如果您愿意，可以在事后更改它们：jsFiddle

var navNames = ['one','two','three','four'];
jQuery('.nivo-control').each(function(i){
    $(this).text( navNames[i] )
})

Answer 2

这个插件似乎不支持这个。但是，您可以在插件创建后使用jQuery循环来破解新标签：

jQuery('.nivo-controlNav').each(function() { // in case there's more than one
    var arrLinks = ['one','two','three','four'];
    jQuery(this).children('a').each(function(i,el) {
        jQuery(el).text(arrLinks[i]);
    });
});

http://jsfiddle.net/mblase75/JSNuU/5/

Answer 3

nivo不支持此功能，但在快速查看其未压缩的源后，可以轻松添加。在检查拇指是否被切换之后的第168行，它有这么简单的一行：

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');

这可以这样调整：

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ kids.eq(i).attr("title") +'</a>');

或alt或name甚至数据属性：

nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ kids.eq(i).data("caption") +'</a>');

并不是说任何人都想花那么多时间来解决这个问题，因为你只使用了一两次。 ;）

如果你这样做，请确保在事后重新压缩它以提高下载速度。

将数值更改为文本 - jQuery / NivoSlider

3 个答案: