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

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>');

并不是说任何人都想花那么多时间来解决这个你只真正使用过一两次的东西。;)

如果您这样做，请务必在事后重新压缩以提高下载速度。