Question

我试图弄清楚如何在500毫秒后从一个图像切换到另一个图像。我目前在图像之间切换，但我希望每个图像显示500毫秒，并使第二个图像在500毫秒后消失，而不是让它循环。这就是我现在所拥有的：

<html>
<head>
<title>loop</title>
<script type = "text/javascript">

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}

function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 500);
}

var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>

任何人都可以帮我解决这个问题吗？谢谢！

Answer 1

这应该做你想做的事情：

<html>
<head>
<title>loop</title>
<script type = "text/javascript">

    var images = [];
    var x = 0;
    var $img = document.getElementById("img");

    images[0] = "image1.jpg";
    images[1] = "image2.jpg";

    function displayNextImage() {
        if (++x < images.length) {
            $img.src = images[x];
            setInterval(displayNextImage, 500);
        }
        else {
            $img.remove();
        }
    }

    function startTimer() {
        setInterval(displayNextImage, 500);
    }


</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>

从一个图像切换到另一个图像

1 个答案: