Автоматическое слайд-шоу с PHP и JavaScript

Question

Автоматическое слайд-шоу с PHP и JavaScript

В общем, я сделал PHP-программу, которая берет изображения из папки и помещает их в «слайд-шоу» в галерее. Код PHP дает идентификаторы изображений, начиная с «1» и так далее.

Теперь с помощью JavaScript я хочу, чтобы он автоматически переключал изображение каждые 2,5 секунды. На самом деле он работает так, как я хочу в моем скрипте Firebug, но в браузере ничего не происходит. Я уже разместил свою ссылку JavaScript в нижней части тела HTML, и это не помогает.

Любая помощь будет оценена.

<div id="gallery" class="grey">
<h3>Gallery</h3>
<div id="slideshow">
<?php
$path = "./img/gallery";
$all_files = scandir($path);
$how_many = count($all_files);
for ($i=2; $i<$how_many;$i++) {
$kubi=$i - 1;
echo "<img src=\"./img/gallery/$all_files[$i]\" id= \"$kubi\"/>";
}
?>
</div>
</div>

Код JavaScript:

var picture = document.getElementById("1");
var i = 0;
function rotateImages() {
while (i < document.getElementById("slideshow").childNodes.length) {
picture.style.display = "none";
picture = picture.nextSibling;
picture.style.display = "inline";
i++;
};
};

window.onload = function(){
document.getElementById("1").style.display = "inline";
setInterval(rotateImages(), 2500);
};

0

html javascript php slideshow

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

То, что происходит, это то, что всегда использует одно и то же изображение первого элемента, скрывает его, а затем показывает второе изображение, фактически оно не перебирает все изображения.

В вашем коде изображение всегда является первым элементом, следующий всегда вторым.

Кроме того, это не должен быть цикл while, так как обратный вызов вызывается один раз для изменения изображения, поэтому измените его на if и сбросьте на первое изображение, когда оно передает количество всех элементов.

Должно быть: (Javascript)

var firstPicture = document.getElementById("1");
var picture = firstPicture ;
var i = 0;
function rotateImages() {
// hide current element
picture.style.display = "none";

// choose who is the next element
if (i >= document.getElementById("slideshow").childNodes.length) {
i = 0;
picture = firstPicture;
} else {
picture = picture.nextSibling;
}

// show the next element
picture.style.display = "inline";
i++;
};

window.onload = function(){
var curImg = document.getElementById("1").style.display = "inline";
setInterval(rotateImages, 2500);
};

2