时间戳

首页 > 解决方案 > 动态文件夹内容的图像自动滑块

javascript - 动态文件夹内容的图像自动滑块

问题描述

我想做自动幻灯片画廊。我想知道如何启动它...它必须是动态的，因为文件夹内容会随着时间而变化。打字不是我想要的。你能给我任何我可以参考的建议或教程吗？我正在搜索，但没有动态文件夹内容...

标签： javascriptphpjqueryhtmlcss

解决方案

这是一个非常通用的示例，对您来说可能不是直接复制/粘贴，但它应该可以帮助您了解实现预期结果的基础知识。

使用这个库： https ://gist.github.com/tsohil/623538

假设您想获取文件夹中的所有图像。

首先，我们将使用 PHP 来获取文件名，如下所示：

<?php
echo json_encode(glob("folder/relative/to/controller/*.{jpg,png,gif}", GLOB_BRACE));

我们的 HTML 将呈现为：

<div id="carousel"></div>

然后在我们的 JS（示例需要 jQuery）中，我们将发送一个请求。

$.get('/phpcontroller.php', {}, function(data) {
    data.forEach(function(val) => {
        $("#carousel").append("<div class=\"inactive\">
           <img width=\"946\" height=\"473\" src=\"/path/to/folder/"+val+"\" class=\"car-img\">
        </div>");
    });
});

推荐阅读