Question

我的自动图像滑块仅显示图像阵列的前两个图像，而图像是三个图像。我无法弄清楚为什么它不能正常工作，我希望有人可能知道出了什么问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title> Automatic Image Slider </title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

    <img id="slider">

</body>

</html>

yyyy/mm/dd H:mm

Answer 1

因为条件if (i < images.length - 1)仅适用于0和1 如果您执行if (i<=images.length-1)，您将获得所有三张图片

Answer 2

images.length = 3

但

images.length - 1 = 2

所以

(i < images.length - 1)

此条件适用于i = 0且i = 1 改用这个条件

(i < images.length)

Answer 3

实际上，您的代码可以处理一个小错误。请注意，您的第一张和最后一张图片是相同的。

您的代码存在的巨大错误是您在每个changeImage调用时创建了一个新的时间间隔，因此最后一个图像正在放置，但会快速替换为第一个图像。

从setInterval(changeImage, 2000)功能中删除changeImage并将其调用如下：

window.onload = function() {
   changeImage();
   setInterval(changeImage, 2000)
}

Answer 4

在这里！我已修改您的代码，以便现在可以使用，注意不要在每次changeImage()调用时重新初始化间隔;）

＆＃13;

//image array
var images = [];
images[0] = 'https://placeimg.com/900/600/animals?t=1515065784396';
images[1] = 'https://placeimg.com/900/600/animals?t=1515065867693';
images[2] = 'https://placeimg.com/900/600/animals?t=1515065784397';

var i = -1;
function changeImage() {
    "use strict";
    ++i;
    if (i >= images.length) {
        i = 0;
    }
    document.getElementById("slider").src = images[i];
}

setInterval(changeImage, 2000);

window.onload = changeImage;

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title> Automatic Image Slider </title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

    <img id="slider">

</body>

</html>

＆＃13;

我的自动图像滑块仅显示前两个图像

4 个答案: