How can I make 6 images play as a gif with an on click button (Can't find whats missing in my code)
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. I was told to use getElementById(), getElementsByName(), or 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>
1 answers
solution1
1 ACCPTED 2014-11-13 14:58:28
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:
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:
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.