Member 13530900 Ответов: 2

Нужна помощь помощь в отладке кода на 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>


Что я уже пробовал:

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>

2 Ответов

Рейтинг:
14

F-ES Sitecore

Каждый раз, когда ваша функция загрузки срабатывает, вы проходите через все изображения в цикле и устанавливаете источник, поэтому каждый раз вы заканчиваете с последним изображением в массиве. Вместо этого вы хотите проходить через них только один раз каждый раз, когда срабатывает таймер (я предполагаю). Поэтому держите где-то подсчет индекса текущего изображения и увеличивайте его в функции загрузки.

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

[no name]

индекс >= картинки.длина может быть изменена на индекс == картинки.длина как индекс всегда увеличивается на 1 и никогда не может удовлетворить '>'.

F-ES Sitecore

А строка index++ вообще не нужна, ее можно переместить в строку выше, но парень явно новичок, поэтому лучше сосредоточиться на том, чтобы сделать код явным о том, что он делает, чем задаваться вопросом об оптимизации и т. д.

Рейтинг:
12

Peter Leow

Там нет ничего, чтобы отлаживать синтаксис мудро, но логически это:

for (i=0;i<pictures.length;i++){
document.getElementById("img1" ).src=pictures[i];
//setTimeout(load,1000);
}
будет петля через все 3 картинки и закончится последней картинкой, которую вы всегда будете видеть.
Вы должны переписать свой код.
Вы должны понимать, что вы делаете, а не просто копировать и вставлять.