javascript - 创建横幅,动态使用目录中的所有图像

标签 javascript php html

我目前正在编写一些代码,尝试制作一个广告横幅,它们会在我的横幅文件夹中的所有图像中旋转。我知道我可以制作一个横幅,如果我声明数组中的每个图像,它就会旋转,但我想做的是创建一个使用文件夹内所有图像的横幅,这样我就不必每次都返回并重新编码新图像上传到横幅文件夹。横幅图像不需要分配 URL,因为它们仅用于此阶段的显示。我正在尝试让横幅显示在此 div 内:

<div id="banner" name="RotateBanner"><img src="Images/banner/1.jpg" /></div>

任何人都可以为我提供一种方法来做到这一点吗?这可能吗?

最佳答案

也许是这样的?

<!DOCTYPE html>
<html>
<body>
<?php
echo '<div id="banner">';

$dir    = 'Images/banner';
$images = glob("$dir/*.{jpg,jpeg,png,gif,bmp}", GLOB_BRACE);
foreach($images as $image){
  echo "<img class='bannerImages' src='$image'>";
}

echo '</div>';
?>
<script>
var myIndex = 0;
carousel();
function carousel() {
    var x = document.getElementsByClassName("bannerImages");
    for (var i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {
        myIndex = 1;
    }    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000);
}
</script>
</body>
</html>

关于javascript - 创建横幅,动态使用目录中的所有图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43159170/

相关文章:

php - 从带有外键的表中获取值

php - WooCommerce NGINX 缓存和 wc-session cookie 添加到购物车问题

javascript - 脚本在 div contentEditable 中插入换行符

javascript - Jest - 未导出的模拟函数

javascript - Highcharts - 气泡在不退出图表的情况下失去焦点

javascript - HTML5SQL 使用 SELECT 语句从 Web 数据库检索记录

javascript - 如何在没有 jquery 的情况下仅使用 EventListener 切换子菜单?

php - 为什么这个简单的 mysql_query/SELECT/echo 会得到 "Array"作为输出?

html - 如何(伪)流式传输 H.264 视频 - 以跨浏览器和 html5 的方式?

html - 按钮移动网站内容