0

我有以下简单的滑块：

<div class="slideshow">
    <img src="[the source]/some.jpg" style="display:none" />
    <img src="[the source]/other.jpg" style="display:block" />
</div>

我想要的是实时跟踪幻灯片的变化。如果图像有display:block，将获得图像名称，some或other在本例中。如果图像名称是some，将附加一个按钮的属性href和id一些值，如果图像名称是other，将附加一个按钮的（链接）href和id一些其他值的属性。

尝试了下面的东西，但这没有用。这不是实时的。幻灯片以 5 秒的间隔更改，此更改间隔也应应用于链接按钮href和id值。

jQuery(".slideshow img").each(function(i,val){
        if ($('.slideshow img').is(':visible')) {
            var name = $(".slideshow img").attr('src').split('/');
            name = name[name.length-1].split('.')[0];
            if ( name == "oferta" ) {
                $("a.offers").attr("href", "index.php?p=575");
                $("a.offers").attr("id", "of_details");
                console.log(name);
            } else {
                $("a.offers").attr("href", "index.php?p=572");
                $("a.offers").attr("id", "of_valentine ");
            }
        }
    });

不幸的是，我的滑块没有将类应用于活动幻灯片图像，只是切换显示属性。

有任何想法吗？

提前致谢！

4

1 回答 1

1

如果您使用过一个不错的 jquery 滑块插件，它可能支持在每次幻灯片更改时运行回调函数。这提供了一个很好的机会来做你想做的事情。例如，使用Nivo Slider，您的幻灯片可能会触发如下（未经测试）：

$('#slider').nivoSlider({
    afterChange: function() {                   
        var images = $('img', '#slider');  // all slideshow images
        var img = images.filter(function() { // find the currently active image
            return ($(this).css('visibility') == 'hidden') ? false : true;
        });
        // Now determine img name and manipulate accordingly
    }
});
于 2013-02-05T21:32:35.730 回答