Question

在html我会有这样的东西

<div id="1" class="nivo-html-caption extraclass1">

一旦显示它仍会显示

<div class="nivo-caption" style="opacity: 0.8;">

它没有把我的课推到nivo-caption div，但是我需要添加extraclass1，任何方法都可以这样做吗？我需要为每个nivo-caption div添加一个不同的类。

Answer 1

您可以将标题嵌入#htmlcaption div中的另一个div中，而不是使用jQuery添加类：

<div id="htmlcaption" class="nivo-html-caption extraclass1">

    <div class="extraclass1">

        <em>HTML</em> caption

    </div>

</div>

无论如何，这就是我要做的。

Answer 2

实际上只有一个<div class="nivo-caption">，其中的内容被每个图像标题替换（如果存在），因此每个图像交换类并不容易。但是......一种方法是在显示下一张幻灯片之前使用beforeChange()回调将CSS类复制到标题。

我有这个在本地工作，它应该给你足够的继续。但是因为在图像之前交换了类，所以图像和类交换的时间并不完全同步。此外，您可能还想在afterLoad()中使用正确的额外 CSS初始化标题。

以下代码使用Nivo slider demo中的图像并需要jQuery（我使用v1.6.2），以及以下Nivo JavaScript和CSS才能正常工作。

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

JavaScript的：

$('#slider').nivoSlider({
    beforeChange: function(){
        var nivoVars = $('#slider').data('nivo:vars');
        var currentImage = nivoVars.currentImage;
        var htmlCaptionForCurrentImage = $(currentImage.attr('title'));
        var classList = htmlCaptionForCurrentImage.attr('class').split(/\s+/);
        var extraClass = classList[classList.length-1]; // assumes your extra class is always the last one (so may need a "starts with" test here as well if it is not)    

        $('.nivo-caption').removeClass(function(index, classes) {
            return (classes.match(/extraclass\d/) || []).join(' '); // assumes your classes are extraclass1, extraclass2, etc. so again may need changing to match your actual classes
        }).addClass(extraClass);
    }
});

HTML：

<div id="slider">
    <img src="toystory.jpg" id="image1" alt="" title="#htmlcaption" />
    <img src="walle.jpg" id="image2" alt="" title="#htmlcaption2" />
</div>
<div id="htmlcaption" class="nivo-html-caption extraclass1">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
<div id="htmlcaption2" class="nivo-html-caption extraclass2">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

和CSS：

#slider {
    width:618px;
    height:246px;
}
.extraclass1 {
    color:red !important;
}
.extraclass2 {
    color:lightblue !important;
}

用于构建此答案的参考文献

Answer 3

尝试addClass()或css() mebbe

Nivo-slider：为nivo-caption div添加额外的类

3 个答案: