Question

我在我的一个项目中使用了NivoSlider，这个特定的客户端要求根据显示的幻灯片更改活动缩略图图像。我查看了文档并找不到有关更改图像本身的任何信息，因此我认为最好的选择是使用Jquery函数更改图像本身。尽管如此，我仍然坚持如何实现这一目标。

NivoSlider创建此HTML：

<div class="nivo-controlNav">
    // Active Thumbnail Link
    <a class="nivo-control active" rel="0">
        <img alt="" src="images/inactive_wedge.png">
    </a>
    // Inactive Thumbnail Link
    <a class="nivo-control" rel="1">
        <img alt="" src="images/inactive_wedge.png">
    </a>
</div>

该插件为正在显示的图片幻灯片的active添加了一类<a>。

当<img>类应用于active标记时，我正在尝试更改包含<a>来源属性以显示“active_wedge.png”。

我如何使用Jquery实现这一目标？（就像这样，我意识到自己知之甚少！）

我尝试过这些方法：

if ($('.nivo-control').hasClass('active')) {
    // Not really sure what to put here at all
}

这是正确的，还是我接近这个？

提前致谢。

额外的JS：

$(window).load(function() {
    $('#theslides').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed: 500, // Slide transition speed
        pauseTime: 3500, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: true, // Use image rel for thumbs
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){
            // Putting code to change the thumbnail image in here
            if ($('.nivo-control').hasClass('active')) {
                $('.nivo-control .active img').attr('src','images/active_wedge.png');
            }
        }, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

Answer 1

不使用if hasclass：

   $('.nivo-control.active img').attr('src','images/active_wedge.png')

Answer 2

if ($('.nivo-control').hasClass('active')) {
   $(this).find('img').attr('src','yourSOURCE')
}

在容器<a> class changes</a>时更改<img/> src属性

2 个答案: