如何通过单击按钮使6张图像作为gif播放（找不到我的代码中缺少的内容）

Question

So I'm trying to get an 6 images to play (runner0 - runner5) and then go back to the beginning and so far only the first image and second image appears but the rest aren't playing but are in the same folder. 因此，我尝试播放6张图片（runner0 -runner5），然后返回到开头，到目前为止，仅出现了第一张图片和第二张图片，但其余图片均未播放，但位于同一文件夹中。 I was told to use getElementById(), getElementsByName(), or getElementsByTagName(). 有人告诉我使用getElementById（），getElementsByName（）或getElementsByTagName（）。 But how would i implement those? 但是我将如何实施这些？

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

Answer 1

The easiest way would be to use an array and loop through it. 最简单的方法是使用数组并遍历整个数组。 First instantiate an array and add all your images to it, which is very easy because you named them with same names and ascending numbers. 首先实例化一个数组，然后将所有图像添加到其中，这非常简单，因为您使用相同的名称和升序命名它们。
So instead of: 所以代替：

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";

say: 说：

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

and in your function wave use: 并在您的功能wave使用：

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

If you just need the source names and don't need the Images (pennant1 and so on) for anything else, you could even simplify it more: 如果您只需要源名称，而不需要图像（pennant1等），则可以进一步简化它：

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

and 和

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

NOTE: You also set the interval with: 注意：您还可以设置间隔：

begin = setInterval(wave, 500);

working fiddle (i just set the file name as content of a paragraph, instead you need to assign it as the source of your image) 有用的小提琴（我只是将文件名设置为段落的内容，而是需要将其分配为图像的来源）

如何通过单击按钮使6张图像作为gif播放（找不到我的代码中缺少的内容）

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-13 14:58:28

如何通过单击按钮使6张图像作为gif播放（找不到我的代码中缺少的内容）

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-13 14:58:28

解决方案1
1 已采纳 2014-11-13 14:58:28