0

ある画像が次の画像にフェードインするイメージローテーターを作成しようとしています。これは、最初の画像にループバックするまで続きます。最初の2つの画像は正しく機能しましたが、残りの3つは正しくフェードしません。彼らはただ視界に飛び込みます。

私はまだローテーションの終わりに到達することを説明する必要があることを知っています。ローテーションの最初のラウンドを機能させようとしているだけなので、まだそれを処理していません。

これを正しく機能させるために何が欠けていますか？

私のHTML：

    <div id="imageRotator">
    <div id="image01" class="current">
        <img src="images/imageRotate01.jpg">
    </div>
    <div id="image02" class="next">
        <img src="images/imageRotate02.jpg">
    </div>
    <div id="image03" class="hidden">
        <img src="images/imageRotate03.jpg">
    </div>
    <div id="image04" class="hidden">
        <img src="images/imageRotate04.jpg">
    </div>
    <div id="image05" class="hidden">
        <img src="images/imageRotate05.jpg">
    </div>
</div>

私のCSS：

#imageRotator div {
    position: absolute;
}

.current {
    z-index: 1;
}

.next {
    z-index: 0;
}

.hidden {
    z-index: -1;
}

私のjQuery：

$(document).ready(function() {

    var firstImage = $('#image01');
    var currentImage, nextImage;

    setInterval(rotateImages, 2000);

    function rotateImages() {
        currentImage = $('div.current');
        nextImage = $('div.next');

        //the first image fades away
        currentImage.animate({opacity: 0}, 2000, function() {
            currentImage.removeClass('current');    
        });

        //bring the second image into view
        nextImage.animate({opacity: 1}, 2000, function() {

            //make the new image the current image
            nextImage.removeClass('next').addClass('current');

            //the next image in the rotation becomes the 'next' image
            nextImage.next().addClass('next').removeClass('hidden');
        });
    }
});
4

1 に答える 1

1

デフォルトではゼロを設定していないため、最初の要素以降の要素opacityのアニメーションはありません。opacity最初の要素を除くすべての要素に対して0に設定してみて、何が起こるかを確認してください。

#imageRotator div {
    position: absolute;
    width: 30px;
    height: 30px;
    outline:1px solid red;
    background:red;
    opacity: 0;
}
#imageRotator div:first-child{
        opacity:1;
}
.current {
    z-index: 1;
}

.next {
    z-index: 0;
}

.hidden {
    z-index: -1;
}

デモ：http：//jsfiddle.net/pavloschris/N3gXd/

于 2013-03-26T19:59:09.553 に答える