0

Chris Coyier のこの非常に基本的なフェージング スライド ショーを使用しています: http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

それぞれがサムネイルである複数のスライドショーが必要であることを除いて、すべて正常に機能します。同じものを複数追加すると壊れてしまいました。を使用していることに気付き、 はid一意slideshowでidなければならないので、 に変更しましたclass。すべてが機能するようになりましたがfadeIn()、fadeOut()機能が壊れているようですか? または、少なくとも、それが行われたようです。ここにフィドルがあります：http://jsfiddle.net/QRZKE/

HTML :

<div class="thumb" id="first">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="second">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="third">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="fourth">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>
<br>
<div class="thumb" id="fifth">
    <span><img src="http://thebarking.com/wp-content/uploads/2012/09/biscuit.jpg"></span>
    <div><img src="http://31.media.tumblr.com/tumblr_m33f16g9Li1r21nejo1_400.jpg"></div>
    <div><img src="https://www.creameryschoolofmusic.com/template/upload_images/Guitar-guitar-10566054-1920-1200.jpg"></div>
</div>

CSS:

    .thumb {
        position: relative;
        width: 240px;
        height: 240px;
        padding: 10px;
        background: white;
        box-shadow: 0 0 20px rgba(0, 0, 0, .4);
    }

    .thumb > div {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 2;
    }

    .thumb > span {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 3;
        -webkit-transition: all .65s ease-in;
        -moz-transition: all .65s ease-in;
        -ms-transition: all .65s ease-in;
        -o-transition: all .65s ease-in;
        transition: all .65s ease-in;
    }

    .thumb > span:hover {
        opacity: 0;

    }

    .thumb img {
        height: 240px;
        width: 240px;
    }

JavaScript:

$(document).ready(function() {
$(".thumb > div:gt(0)").hide();
setInterval(function() {
    $(".thumb > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo(".thumb");
}, 2500);
});

注:スライド ショーをカバーする s内に画像を追加しました。spanホバーして消すには、ホバーする必要があります (ホバー後にスライドショーを開始するかのように)。

何か案は？どんな助けでも大歓迎です。

編集:他のスライドショー (1 つだけ) を削除すると、フェード効果が正常に機能することがわかりました。複数追加するのは一度だけです。しかし、クラスは一意でなくてもかまいませんよね? では、なぜスクリプトが壊れているのでしょうか。(実際のスクリプトが壊れているわけではありません。フェード効果だけです。それ以外の場合は、スライダーは正常に動作します!)

4

2 に答える 2