Question

我按照教程创建了一个简单的javascript幻灯片，但我遇到了一个奇怪的错误......前2个循环完美无缺，但一旦计数器重置，幻灯片开始快速显示上一张幻灯片然后尝试淡入正确滑动。知道是什么导致了这个吗？

我在一个文件夹中有3张图片（名为Image1.png，Image2.png和Image3.png），用于我的简单幻灯片放映和3个div设置如下：

    <div id="SlideshowFeature">
        <div id="counter">
            3
        </div>
        <div class="behind">
            <img src="SlideShow/image1.png" alt="IMAGE" />
        </div>
        <div class="infront">
            <img src="SlideShow/image1.png" alt="IMAGE" />
        </div>
    </div>

我的javascript看起来像这样

var nextImage;
var imagesInShow;
var currentImage;
var currentSrc
var nextSrc

function changeImage() {
    imagesInShow = "3";
    currentImage = $("#counter").html();
    currentImage = parseInt(currentImage);


    if (currentImage == imagesInShow) {
        nextImage = 1;
    }
    else {
        nextImage = currentImage + 1;
    }

    currentSrc = $(".infront img").attr("src");
    nextSrc = "SlideShow/image" + nextImage + ".png";

    $(".behind img").attr("src", currentSrc);

    $(".infront").css("display", "none");

    $(".infront img").attr("src", nextSrc);

    $(".infront").fadeIn(1000);

    $("#counter").html(nextImage);

    setTimeout('changeImage()', 5000);


}

$(document).ready(function () {
    changeImage();
});

修改

这也是我的CSS

#SlideshowFeature
{
text-align:center;
margin: 0 auto;
width:800px;
background: #02183B;
height:300px;
float: left;
overflow:hidden;
display:inline;

}

#SlideshowFeature div
{
    width: 800px;
    height:300px;
    position:absolute;
}

#counter
{
    display:none;
}

Answer 1

问题似乎出现在你的HTML结构中（而不是你的JS）：

...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...

我认为您打算放image1.png然后image2.png

Answer 2

.infront必须在前面，而后面必须在后面

    .behind {
        z-index: 1;
    }
    .infront {
        z-index: 255;
    }

我还将重新调度逻辑移到了fadeIn回调中：

$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});

$("#counter").html(nextImage);

//setTimeout('changeImage()', 2500);

现在对我好。

Javascript幻灯片循环好两次，然后错误

2 个答案: