0

我正在尝试创建一个图像旋转器，其中一个图像将淡入下一个图像，依此类推，直到它循环回第一个图像。我让前两个图像正常工作，但其余 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 回答