我目前正在编写一些代码,尝试制作一个广告横幅,它们会在我的横幅文件夹中的所有图像中旋转。我知道我可以制作一个横幅,如果我声明数组中的每个图像,它就会旋转,但我想做的是创建一个使用文件夹内所有图像的横幅,这样我就不必每次都返回并重新编码新图像上传到横幅文件夹。横幅图像不需要分配 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/