javascript - Nivo slider - 用文字替换项目符号文本 1、2、3

Question

我在网站上使用 Nivo slider ，想知道是否可以通过更改 javascript/添加一些 css 将编号的项目符号点(即 1、2、3)更改为单词？

我认为这与这部分代码有关......

// Add Control nav
    if(settings.controlNav){
        vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
        slider.after(vars.controlNavEl);
        for(var i = 0; i < kids.length; i++){
            if(settings.controlNavThumbs){
                vars.controlNavEl.addClass('nivo-thumbs-enabled');
                var child = kids.eq(i);
                if(!child.is('img')){
                    child = child.find('img:first');
                }
                if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
            } else {
                vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
            }
        }

如果我能拥有这些单词并使用 css 对其进行样式设置，那就太好了。

我使用 controlNav 作为按钮而不是项目符号。

如果您需要更多信息，请告诉我。

谢谢 - 真的希望有人能帮助我!

Answer 1

您可以考虑使用 CSS 选择器通过其 rel 属性来定位 anchor (对于这些 anchor ，该属性似乎是基于 1 的数字索引)。请参阅CSS - style a link based on its "rel" attribute?有关此主题的详细信息。

如何使用纯 CSS 实现此目的的示例如下:

a.nivo-control[rel='1'] { content: 'One!'; }

当然，要使其发挥作用，您需要提前知道大约有多少张幻灯片。

如果您更喜欢 jQuery(您已经拥有它，因为它是使用 Nivo 的先决条件)，您可以执行以下操作:

jQuery("a.nivo-control[rel='1']").html("One!");

(编辑:这里的基本原理是，您不必更改 Nivo Slider 的基本代码，您可以在事后进行此修改；因此，当您将来更新插件时，您的更改有望开箱即用。)