Question

所以基本上我已经制作了一个PHP程序，它从一个文件夹中获取图片并将其放入Gallery中的“幻灯片”中。 PHP代码使图像id从“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);
};

Answer 1

总是使用相同的第一个元素图片，隐藏它然后显示第二个图像，它实际上并不遍历所有图片。

在您的代码中，图片始终是第一个元素，下一个始终是第二个元素。

此外，它不应该是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);
};

使用PHP和JavaScript自动幻灯片放映

1 个答案: