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 に答える