0

jQueryを使用して画像ローテーター/スライドを作成しました。これは画像だけの場合は正常に機能しますが、imgタグをhrefでラップすると、スライドは最初の画像を超えて移動しません。私はまだjQueryにかなり慣れていませんが、タグではなくコンテナ内の画像を検索するため、コードのimg：first / img：visible部分と関係があると思います。imgタグをスパンでラップして、コードが検索するクラスを割り当ててみたので、画像だけでもリンク付きの画像でも構いませんが、取得できないようです。それはうまくいきます（私はおそらくそれを間違っているだけですが）。

もう1つの注意点は、画像リストはPHPで動的に作成されることです。これを機能させることができれば、画像の周囲のhrefは設定されている場合はPHPによって追加されるため、画像が常にリンクするかどうか、または混合物である可能性があります。

とにかく、これが以下のコードスニペットです。また、リンクされた画像がないため、これが機能しているフィドルもあります。

HTML：

<div id="slide_wrapper">

    <p id="slide_controls">
        <span id="prev-but"><img src="http://webbossuk.com/admin/JS/webboss-slider/imgs/but_prev.png" alt="Previous" /></span>
        <span id="next-but"><img src="http://webbossuk.com/admin/JS/webboss-slider/imgs/but_next.png" alt="Next" /></span>
    </p>


<div id="image-container">  

    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_shop.jpg" alt="Slide 1" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_podcasts.jpg" alt="Slide 2" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_page_ed.jpg" alt="Slide 3" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_members.jpg" alt="Slide 4" title="" />
    <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_more.jpg" alt="Slide 5" title="" />

    <p id="slide_caption"><span></span></p>
</div>

</div>​

jQuery：

var Speed = 5000; //Time in Ms

(function imageTransition() {
setTimeout(function() {
    $('#image-container img:visible').fadeOut("slow"); // FADE OUT VISIBLE IMAGE
    if ($('#image-container img:visible').next('img').size("slow") < 1) {
        $('#image-container img:first').fadeIn(); // FADE IN FIRST IMAGE    
        $('#slide_caption').html('<span>' + $('#image-container img:first').attr('title') + '</span>');

        if ($('#slide_caption span').html() == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO ALT TEXT
        } else {
            $('#slide_caption').fadeIn();
        }
    } else {
        $('#image-container img:visible').next('img').fadeIn("slow"); // FADE IN NEXT IMAGE    
        $('#slide_caption').html('<span>' + $('#image-container img:visible').next('img').attr('title') + '</span>'); //SHOW ALT TEXT CAPTION
        if ($('#slide_caption span').html() == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO ALT TEXT
        } else {
            $('#slide_caption').fadeIn();
        }
    }

    imageTransition(); //TRIGGER FUNCTION AGAIN
}, Speed); //Xms INTERVAL BEFORE FUNCTION RUNS AGAIN
})();​

- - -編集 - - -

これに対する解決策から新しい問題が発生したので、以下のコメントにすべてではなく、それに対処するための新しい質問をしました：jQuery画像スライダーのキャプションの問題、間違って表示

4

1 に答える 1

1

次のように、各スライドをdivでラップします。

<div class="slide">
    <a href="http://example.com">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_shop.jpg" alt="Slide 1" title="" />
    </a>
</div>

次に、画像自体ではなく、divをフェードアウトおよびフェードインします。

于 2012-10-01T10:40:28.730 に答える