在javascript中调试代码需要帮助帮助 [英] Need help help in debugging code in javascript
本文介绍了在javascript中调试代码需要帮助帮助的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Hi,
I wrote the below code to create automatic slideshow . But the slideshow is not happening & only one image is showing all time. Please help
<!DOCTYPE html>
<html>
<head>
<title color= "#0101DF">Slide show</title>
<meta charset="UTF-8">
<meta name= "content" description="This is what Google will show you">
<link rel="icon" href= "https://qsf.ec.quoracdn.net/-3-images.favicon.ico-26-1285e84414ca1091.ico" />
<script>
pictures=["Penguins.jpg","saran.jpg","Tulips.jpg"];
function settime() {
setInterval(load,1000);
}
function load() {
for (i=0;i<pictures.length;i++){
document.getElementById("img1" ).src=pictures[i];
//setTimeout(load,1000);
}
}
</script>
</head>
<center>
<body bgcolor="#E6E6FA" onload=settime()>
<h1> My Pictures </h1>
<img id="img1" style="height:100%;width:100%" />
</body>
</center>
</html>
我尝试过：
What I have tried:
Hi,
I wrote the below code to create automatic slideshow . But the slideshow is not happening & only one image is showing all time. Please help
<!DOCTYPE html>
<html>
<head>
<title color= "#0101DF">Slide show</title>
<meta charset="UTF-8">
<meta name= "content" description="This is what Google will show you">
<link rel="icon" href= "https://qsf.ec.quoracdn.net/-3-images.favicon.ico-26-1285e84414ca1091.ico" />
<script>
pictures=["Penguins.jpg","saran.jpg","Tulips.jpg"];
function settime() {
setInterval(load,1000);
}
function load() {
for (i=0;i<pictures.length;i++){
document.getElementById("img1" ).src=pictures[i];
//setTimeout(load,1000);
}
}
</script>
</head>
<center>
<body bgcolor="#E6E6FA" onload=settime()>
<h1> My Pictures </h1>
<img id="img1" style="height:100%;width:100%" />
</body>
</center>
</html>
推荐答案
每次加载函数触发时，都会循环浏览所有图片并设置源，所以每次你最终得到数组中的最后一个图像。相反，每次计时器触发时，你只需要经历一次（我假设）。因此，将索引计数保留在当前图片的某处，并在加载函数中将其递增。
Every time your load function fires you go through all pictures in a loop and set the source, so every time you end up with the last image in the array. Instead you want to go through them only once every time the timer fires (I assume). So keep an index count somewhere of the current picture and increment it in the load function.
var index = 0;
pictures = ["Penguins.jpg", "saran.jpg", "Tulips.jpg"];
function settime() {
setInterval(load, 1000);
}
function load() {
document.getElementById("img1").src = pictures[index];
index++;
if (index >= pictures.length) {
index = 0;
}
}
没有什么可以在语法上调试，但从逻辑上讲，这是：
There is nothing to debug syntax wise, but logically, this:
for (i=0;i<pictures.length;i++){
document.getElementById("img1" ).src=pictures[i];
//setTimeout(load,1000);
} 将循环播放所有3张图片，并以您将永远看到的最后一张图片结束。
您必须重写代码。
您必须了解自己在做什么，不要只是复制和粘贴。
will loop thru all the 3 pictures and end with the last picture that you will always see.
You have to rewrite you code.
You have to understand what you are doing, don't just copy and paste.
这篇关于在javascript中调试代码需要帮助帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
