使用 JavaScript 循环浏览图像时出现问题

Question

我目前遇到问题，我的 function 无法正确循环浏览图像。 我在 html 代码中的第一张图片会显示，但代码会尝试切换到第二张图片，而只是显示空白的白色背景。 所有图像都位于同一目录文件夹中。 我已经检查并确保所有文件名和扩展名都与它们的真实名称匹配，试图找到任何可能导致它无法运行但无济于事的语法错误。 难道是我试图创建一个数组并同时填充它，但这样做不正确吗？

这是我基于我的代码的答案： 链接

这是我当前的相关代码：

JS：

    <script type="text/javascript">
        function displayNextImage() {
            var i = (i === imgArray.length - 1) ? 0 : i + 1;
            document.getElementById("image").src = imageArr[i];
        }

        function displayPreviousImage() {
            var i = (i <= 0) ? imgArray.length - 1 : i - 1;
            document.getElementById("image").src = imageArr[i];
        }

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

        var imageArr = ["~/Images/Carrying Food In.jpg", "~/Images/Food Pantry.jpg", "~/Images/Fresh Produce.jpg", "~/Images/Handing Out Food.jpg", "~/Images/Man Pushing Wheelbarrow.jpg", "~/Images/Woman Leading Class.jpg"], i = -1

    </script>

相关 HTML：

<body onload="startTimer()">
    <img id="image" src="~/Images/Food Pantry.jpg" style="width: auto;" />
    <p></p>
</body>

编辑：将一种方法更改为以前的方法（有两个相同的方法名称） - 问题仍然存在

Answer 1

这是因为对您的数组的引用拼写错误，并且因为在每次 function 运行时，您都重新声明了迭代器变量var i 。 此代码应该可以工作：

    <script type="text/javascript">
    
        var imageArr = ["~/Images/Carrying Food In.jpg", "~/Images/Food Pantry.jpg", "~/Images/Fresh Produce.jpg", "~/Images/Handing Out Food.jpg", "~/Images/Man Pushing Wheelbarrow.jpg", "~/Images/Woman Leading Class.jpg"], i = -1
        var i;

        function displayNextImage() {
            i = (i <= 0) ? imageArr.length - 1 : i - 1;
            document.getElementById("image").src = imageArr[i];

        }

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


    </script>

使用 JavaScript 循环浏览图像时出现问题

问题描述

1 个解决方案

解决方案1
0 2020-08-08 22:58:05

使用 JavaScript 循环浏览图像时出现问题

问题描述

1 个解决方案

解决方案1 0 2020-08-08 22:58:05

解决方案1
0 2020-08-08 22:58:05