[英]looping through images with javascript
I have a problem with a little javascript routine I am trying to write but after staring at it for hours, I can't get it to work, so its probably something trivial. 我尝试编写一些JavaScript例程时遇到了问题,但盯着它看了几个小时后,我却无法正常工作,因此可能有些琐碎。 I have a series of 11 images called dd0.jpg, dd1.jpg ....dd10.jpg and I'm trying to loop through them, and then when I get to dd10.jpg, the process reverses and then goes back to dd0.jpg 我有一系列11张图像,分别为dd0.jpg,dd1.jpg .... dd10.jpg,我试图遍历它们,然后当我到达dd10.jpg时,过程反向,然后返回dd0.jpg
The javascript code is javascript代码是
<script>
var ddimagearray = [];
var ddn = 0;
var incrementing = true;
for(var i =0; i<11; i++)
{
ddimagearray[i] = new Image();
ddimagearray[i].src = "/dd/dd" + i + ".jpg";
}
var ddname = document.getElementById("ddimage");
var myVar = setInterval(function(){ changeimage() }, 100); // Milliseconds
function changeimage()
{
if (incrementing == true)
{
ddname.src = ddimagearray[ddn].src;
ddn++;
if(ddn == 14)
{
incrementing = false;
}
}
else
{
ddname.src = ddimagearray[ddn].src;
ddn--;
if(ddn == 0)
{
incrementing = true;
}
}
}
</script>
On a test page I have <center><img src="/dd/dd0.jpg" id="ddimage" class=ddimage/></center><script src="dd.js"></script>
Can anyone see anything desperately wrong? 谁能看到任何拼命的错误?
You need to change 14
to 10
in incrementing == true
case, 14 will throw exception Uncaught TypeError: Cannot read property 'src' of undefined
because ddimagearray have only 10 items. 您需要以incrementing == true
方式将14
更改为10
,否则14将引发异常Uncaught TypeError: Cannot read property 'src' of undefined
因为ddimagearray只有10个项目。
var ddimagearray = []; var ddn = 0; var incrementing = true; for(var i =0; i<11; i++) { ddimagearray[i] = new Image(); ddimagearray[i].src = "http://lorempixel.com/200/200/sports/" + i; } var ddname = document.getElementById("ddimage"); var myVar = setInterval(function(){ changeimage() }, 100); // Milliseconds function changeimage() { if (incrementing == true) { ddname.src = ddimagearray[ddn].src; ddn++; if(ddn == 10) { incrementing = false; } } else { ddname.src = ddimagearray[ddn].src; ddn--; if(ddn == 0) { incrementing = true; } } }
<img id="ddimage" src="http://lorempixel.com/200/200/sports/0/"/>
JSFiddle of your code works fine(except of-course for the limit of ddn as @jcubic posted). 您的代码的JSFiddle可以正常工作(当然,除了@jcubic发布的ddn的限制)。
Is this a simplified version of your actual code? 这是您的实际代码的简化版本吗? Are you getting any errors? 您有任何错误吗?
your problem might be that ddimagearray
is not in scope of the changeImage
function so ddname.src = ddimagearray[ddn].src;
您的问题可能是ddimagearray
不在changeImage
函数的范围内,因此ddname.src = ddimagearray[ddn].src;
throws uncaught typeError
. 抛出uncaught typeError
。
In your code is the line: 该行中的代码是:
var myVar = setInterval(function(){ changeimage() }, 100); var myVar = setInterval(function(){changeimage()},100); // Milliseconds //毫秒
Replace it with the following and see what happens: 将其替换为以下内容,然后看看会发生什么:
var myVar = setInterval("changeimage()", 100); var myVar = setInterval(“ changeimage()”,100); // Milliseconds //毫秒
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.