-4

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

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

4 回答 4

3

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

错误的：

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

正确的：

animal[0] = new Image();
animal[0].src = "bear.jpg";
于 2013-10-03T02:43:37.970 回答
0

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

(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);
}
于 2013-10-03T02:53:34.593 回答
0

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

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

您的数组名称中也存在拼写错误：

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

确保在测试之前保持代码整洁......

于 2013-10-03T02:43:18.727 回答
-1 
  animal[4] = "cat.jpg";
    }
    else
    alert("There are no images to load");
    }
    function startSlideShow()

你有两个闭合花括号，没有打开else alert(我想你要么改变或添加一个开口之前

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

要么是一个开放的花括号，要么只是摆脱它

于 2013-10-03T02:46:39.270 回答