Javascript 如何通过单击按钮使6幅图像以gif格式播放（无法找到代码中缺少的内容）_Javascript

Javascript 如何通过单击按钮使6幅图像以gif格式播放（无法找到代码中缺少的内容）

javascript

Javascript 如何通过单击按钮使6幅图像以gif格式播放（无法找到代码中缺少的内容）,javascript,Javascript,因此，我尝试播放6张图片（runner0-runner5），然后返回到开始，到目前为止，只有第一张图片和第二张图片出现，但其他图片没有播放，而是在同一文件夹中。我被告知使用getElementById（）、getElementsByName（）或getElementsByTagName（）。但我将如何实现这些目标 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1

因此，我尝试播放6张图片（runner0-runner5），然后返回到开始，到目前为止，只有第一张图片和第二张图片出现，但其他图片没有播放，而是在同一文件夹中。我被告知使用getElementById（）、getElementsByName（）或getElementsByTagName（）。但我将如何实现这些目标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Project 10 11 Sample</title>
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var curPennant = 1;
var begin;
pennant1 = new Image();
pennant1.src = "runner0.jpg";
pennant2 = new Image();
pennant2.src = "runner1.jpg";
pennant3 = new Image();
pennant3.src = "runner2.jpg";
pennant4 = new Image();
pennant4.src = "runner3.jpg";
pennant5 = new Image();
pennant5.src = "runner4.jpg";
pennant6 = new Image();
Pennant6.src = "runner5.jpg";



function wave() {
        if (curPennant == 1) {
                document.images[0].src = pennant2.src;
                curPennant = 2;


        }
        else {
                document.images[0].src = pennant1.src;
                curPennant = 1;
        }
}
function startWaving() {
        if (begin)
                clearInterval(begin);
        begin = setInterval("wave()",500);
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body>
<p>
<img alt="" height="132" src="runner0.jpg" width="107" /></p>
<p><input type="button" value=" Wave"
onclick="startWaving();" /><input type="button" name="stop"
value=" Stop" onclick="clearInterval(begin);" /></p>
</body>
</html>


项目10 11样本

最简单的方法是使用数组并在其中循环。首先实例化一个数组并将所有图像添加到其中，这非常简单，因为您使用相同的名称和升序编号命名它们。
因此，不是：

var curPennant = 1;
pennant1 = new Image();
pennant1.src = "runner0.jpg";
pennant2 = new Image();
pennant2.src = "runner1.jpg";
pennant3 = new Image();
pennant3.src = "runner2.jpg";
pennant4 = new Image();
pennant4.src = "runner3.jpg";
pennant5 = new Image();
pennant5.src = "runner4.jpg";
pennant6 = new Image();
Pennant6.src = "runner5.jpg";

说：

如果您只需要源名称而不需要图像（pennant1等），您甚至可以将其简化为：

var current = 0;
var imageArray = [];
for(i = 0; i < 6; i++){
    imageArray.push("runner"+i+".jpg");
}

注意：您还可以通过以下方式设置间隔：

begin = setInterval(wave, 500);

正在工作（我只是将文件名设置为段落内容，而您需要将其指定为图像源）

请记住我的话，我对编程和本网站完全是初学者。除了前两幅图像，您从不使用任何图像。如果我添加“document.images[0].src=“pennant3.src；curPennant=3；“这会有帮助吗？你需要将图像放入数组，设置一个计数器，将其初始化为

，然后在计时器内，将计数器的长度按模数递增，并显示计数器指向的图像。这有意义吗？你能给我举个例子吗？@akonsu我通常通过查看它的外观而不是仅仅显示它来获得更多信息。”阅读。顺便说一句，非常感谢你的帮助。啊，好的，我现在明白了。非常感谢@Markai

var current = 0;
var imageArray = [];
for(i = 0; i < 6; i++){
    imageArray.push("runner"+i+".jpg");
}

function wave(){
    document.images[0].src = imageArray[current++%imageArray.length];
}

begin = setInterval(wave, 500);