请帮我调试这个简单的javascript

Please help me debug this simple javascript?

本文关键字：简单 javascript 调试      更新时间：2023-09-26

我不明白...我的图片无法加载，它们位于同一文件夹中

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Animal</title>
<script type="text/javascript">
var i = 0;
var timeout;
function preLoadImages()
{
if(document.images)
{
animal = new Array();
animal[0] = new Image();
anmial[0] = "bear.jpg";
animal[1] = new Image();
anmial[1] = "duck.jpg";
animal[2] = new Image();
anmial[2] = "elephant.jpg";
animal[3] = new Image();
anmial[3] = "lion.jpg";
animal[4] = new Image();
animal[4] = "cat.jpg";
}
else
alert("There are no images to load");
}
function startSlideShow()
{
if(i < animal.length)
{
document.images["animal_pic"].src = animal[i];
i++;
}
else
{
i =0;
document.images["animal_pic"].src = animal[i];
}
timeout = setTimeout('startSlideSHow()', 3000);
}
function stopSlideShow()
{
clearTimeout(timeout);
}
</script>
</head>
<body bgcolor="#FFFF00" onLoad = "preLoadImages()">
<img name="animal_pic" height="300" width="300"/>
<form>
<br/><br/>
<input type=button value="Start Show" onClick="return startSlideShow();"/>
<input type=button value="Stop Show" onClick="return stopSlideShow();"/></form>      
</body>
</html>

您已经创建了动物数组，但将值存储在 anmial 中，拼写错误，并且还必须设置 src 属性...

错：

animal[0] = new Image();
anmial[0] = "bear.jpg";

正确：

animal[0] = new Image();
animal[0].src = "bear.jpg";

从我快速看到的情况来看，您在那里缺少一个右括号：

animal[3] = "lion.jpg";
animal[4] = new Image();
animal[4] = "cat.jpg";
} else {

数组名称中也有拼写错误：

anmial[3] = ...
animal[4] = ...

在测试之前，请务必保持代码整洁...

我创建了一些应该可以工作的代码：

(function() {
    'use strict';
    var currentImage = 0,
        imageElement,
        timer,
        images = [
        'bear.jpg',
        'duck.jpg',
        'elephant.jpg',
        'lion.jpg',
        'cat.jpg'
    ];
    var startSlideShow = function() {
        timer = window.setInterval(nextImage, 3000);
    };
    var stopSlideShow = function() {
        window.clearInterval(timer);
    };
    var nextImage = function() {
        currentImage++;
        if( currentImage == images.length ) {
            currentImage = 0;
        }
        imageElement.src = images[currentImage];
    };
    window.addEventListener('DOMContentLoaded', function() {
        imageElement = document.querySelector('img[name="animal_pic"]');
        imageElement.src = images[0];
        startSlideShow();
    });
})();

你真的应该做一些基本的JavaScript教程，因为你的代码中有很多错误。以下是一些建议。

// Indent your code, JUST DO IT.
var i = 0;
var timeout;
function preLoadImages() { // This function does not actually preload any images.
if(document.images) // Why would you check if there are images in the document when you're gonna load them manually anyways?
{
animal = new Array(); // Use a literal array, also use the 'var' keyword to declare a new variable.
animal[0] = new Image(); // Why would you need this now?
anmial[0] = "bear.jpg"; // I assume you meant 'animal', still why would you fill the same index again?
animal[1] = new Image(); // Same as above
anmial[1] = "duck.jpg"; // Same as above
animal[2] = new Image(); // Same as above
anmial[2] = "elephant.jpg"; // Same as above
animal[3] = new Image(); // Same as above
anmial[3] = "lion.jpg"; // Same as above
animal[4] = new Image(); // Same as above 
animal[4] = "cat.jpg"; // Same as above
}
else // Missing an opening bracket
alert("There are no images to load"); // Yes there are, regardless of document.images.
// Missing closing bracket
}
function startSlideShow()
{
if(i < animal.length) 
{
document.images["animal_pic"].src = animal[i];
i++;
}
else
{
i =0;
document.images["animal_pic"].src = animal[i];
}
timeout = setTimeout('startSlideSHow()', 3000); // This should have a function as a parameter not a string, also there is a typo.
}
function stopSlideShow()
{
clearTimeout(timeout);
}

  animal[4] = "cat.jpg";
    }
    else
    alert("There are no images to load");
    }
    function startSlideShow()

您有两个右大括号，没有一个可以打开else alert(我认为您之前可以更改或添加一个左大括号 

else
alert("There are no images to load");

到一个开口的大括号或只是去掉它

相关文章：