请帮我调试这个简单的javascript？_Javascript_Arrays

请帮我调试这个简单的javascript？

javascript arrays

请帮我调试这个简单的javascript？,javascript,arrays,Javascript,Arrays,我不明白…我的照片无法加载，它们在同一个文件夹中 <!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) { ani

我不明白…我的照片无法加载，它们在同一个文件夹中

<!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>


动物
var i=0；
var超时；
函数preload images（）
{
if（document.images）
{
animal=新数组（）；
动物[0]=新图像（）；
Anumeric[0]=“bear.jpg”；
动物[1]=新图像（）；
ANANEMAL[1]=“duck.jpg”；
动物[2]=新图像（）；
Anumeric[2]=“elephant.jpg”；
动物[3]=新图像（）；
Anumeric[3]=“lion.jpg”；
动物[4]=新图像（）；
动物[4]=“cat.jpg”；
}
其他的
警报（“没有要加载的图像”）；
}
函数startSlideShow（）
{
如果（i<动物长度）
{
document.images[“animal_pic”].src=animal[i]；
i++；
}
其他的
{
i=0；
document.images[“animal_pic”].src=animal[i]；
}
timeout=setTimeout（'startSlideSHow（）'，3000）；
}
函数stopSlideShow（）
{
clearTimeout（超时）；
}

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

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

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

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

在测试之前，请确保代码整洁…

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

错：

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

正确：

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

你有两个右大括号，没有一个可以打开。

else alert（

我想你应该先更改或添加一个左大括号

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

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

(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);
}

//缩进代码，就这样做。
var i=0；
var超时；
函数preload images（）{//此函数实际上不预加载任何图像。
if（document.images）//在手动加载图像时，为什么要检查文档中是否有图像？
{
animal=new Array（）；//使用文字数组，同时使用'var'关键字声明新变量。
动物[0]=新图像（）；//为什么现在需要这个？
ANANEMAL[0]=“bear.jpg”；//我想你的意思是“动物”，但为什么还要再次填写相同的索引？
动物[1]=新图像（）；//同上
ANANEMAL[1]=“duck.jpg”；//同上
动物[2]=新图像（）；//同上
ANANEMAL[2]=“elephant.jpg”；//同上
动物[3]=新图像（）；//同上
ANANEMAL[3]=“lion.jpg”；//同上
动物[4]=新图像（）；//同上
动物[4]=“cat.jpg”；//同上
}
else//缺少一个左括号
警报（“没有要加载的图像”）；//是的，不管document.images如何。
//缺少结束括号
}
函数startSlideShow（）
{
如果（i<动物长度）
{
document.images[“animal_pic”].src=animal[i]；
i++；
}
其他的
{
i=0；
document.images[“animal_pic”].src=animal[i]；
}
timeout=setTimeout（'startSlideSHow（）'，3000）；//这应该有一个作为参数的函数，而不是字符串，还有一个输入错误。
}
函数stopSlideShow（）
{
clearTimeout（超时）；
}

查看浏览器中的开发者控制台。有JS错误吗？有网络错误吗？除了打字错误，为什么要分配每个数组元素两次？因为他没有意识到他必须分配给刚刚创建的图像的

src

属性，而不是他目前正在做的事情——用字符串替换它？你没有的大括号eeing并没有丢失；有些人根本无法缩进。在

else

部分结束整个函数之后的大括号，而不是

else

。大括号是正确的。添加或删除大括号都会导致语法错误。为了一致性起见，我建议在

else

内容周围添加一对大括号，但是我建议他学会正确缩进……这样至少可以防止两个人在这里追逐自己的尾巴。

animal[0]=new Image（）

是无用的。@JonKoops:你是说一旦你正确设置了

src

，它就不会预加载第一个图像吗？我是说如果你用另一个值替换数组的同一个索引，它实际上对图像对象没有任何作用。@JonKoops:你真的读过答案吗？部分答案是设置

src

ra而不是覆盖图像。虽然这也包括更改

startSlideShow

以使用

src

而不是所有

animal[i]

…很好的迂腐和吹毛求疵。不过我注意到你没有试图真正解决这个问题。或者，如果你尝试过，它失败得很惨。很高兴看到你的回答@cHaoHe请求我们帮助调试，这里是我的更正。除了你没有更正任何东西。你所有的“更正”是注释，95%是语法上的模糊。唯一值得一提的是拼错的名字。@cHao你的贡献在哪里？

// 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);
}