<分区>
标签 javascript php html css
我正在尝试使用 PHP 和 JavaScript 动态显示目录中的多个图像。这样我就可以显示所选图像以提供放大 View 。我想要一些像使用图像作为指标和引用的东西是 https://www.w3schools.com/w3css/w3css_slideshow.asp请帮忙!!!
<div class="main">
<?php
$dirname = "images/";
$images = glob($dirname."*");
if($images){
?>
<marquee behavior="scroll" scrollamount="4.5" direction="right" onmouseover="this.stop();" onmouseout="this.start();">
<ul class="ulclass">
<?php
foreach($images as $image){
?>
<div style="display:inline;" id="loadingImage">
<?php echo '<img src="'.$image.'" onclick="show_image()" height="100" width="100" style="cursor:pointer;display:inline;margin-left:0px;margin-top:0px;"">';?>
</div>
<script type="text/javascript">
<!--Enlarge image-->
function show_image(){
alert("hello");
var elem = document.createElement("img");
elem.setAttribute("src","im");
document.getElementById('imageDiv').appendChild(elem);
}
</script>
<?php }?>
<?php }?>
</ul>
</marquee>
<div id="imageDiv">
<!-- Display the enlarged image here !! -->
</div>
</div>最佳答案
If 是一个使用 JavaScript 的简单示例。
PHP 将获取您的图像的 url 我认为您需要的是这个 JS 代码来显示它们
更新
我不知道你的 php 文件的名称，但这是一个示例 test.php:
<html>
<head>
<title>Online PHP Script Execution</title>
<script type="text/javascript">
<!--Enlarge image-->
var imageDiv = document.getElementById('imageDiv')
function show_image(image) {
var newImage = document.createElement('img');
newImage.setAttribute("src", image.getAttribute('src'));
imageDiv.replaceChild(newImage, imageDiv.childNodes[0]);
}
</script>
</head>
<body>
<div class="main">
<?php
$dirname = "images/";
$images = glob($dirname."*");
if($images) {
?><marquee behavior="scroll" scrollamount="4.5" direction="right" onmouseover="this.stop();" onmouseout="this.start();">
<ul class="ulclass">
<div style="display:inline;" id="loadingImage">
<?php foreach($images as $image) { ?>
<img src="<?php echo $image; ?>" onclick="show_image(this)" height="100" width="100" style="cursor:pointer;display:inline;margin-left:0px;margin-top:0px;">
<?php } ?></div>
</ul>
</marquee>
<div id="imageDiv">
<!-- Display the enlarged image here !! -->
</div>
<?php } else { ?><div id="imageDiv">No images found.</div>
<?php } ?></div>
</body>
</html>
var imageDiv = document.getElementById('imageDiv')
function show_image(image) {
var newImage = document.createElement('img');
newImage.setAttribute("src", image.getAttribute('src'));
imageDiv.replaceChild(newImage, imageDiv.childNodes[0]);
}<div class="main">
<marquee behavior="scroll" scrollamount="4.5" direction="right" onmouseover="this.stop();" onmouseout="this.start();">
<ul class="ulclass">
<div style="display:inline;" id="loadingImage">
<img src="https://s-media-cache-ak0.pinimg.com/564x/a2/8b/6e/a28b6ea6ad065de856b15dbabcce1adb.jpg" onclick="show_image(this)" height="100" width="100" style="cursor:pointer; display:inline; margin-left:0px; margin-top:0px;">
<img src="http://s12.favim.com/orig/160210/asian-girl-kfashion-korean-model-Favim.com-3977052.jpg" onclick="show_image(this)" height="100" width="100" style="cursor:pointer; display:inline; margin-left:0px; margin-top:0px;">
</div>
</ul>
</marquee>
<div id="imageDiv">
<!-- Display the enlarged image here !! -->
</div>
</div>关于javascript - 如何从 PHP 和 JavaScript 中的图像目录中预览选定的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43037413/
相关文章：
javascript - HTML/CSS - 导航栏拉伸(stretch)/填充背景颜色
javascript - 通过动态创建默认值为 Canvas 图像的 html 文件元素上传克隆的 Canvas 照片
php - CodeIgniter，如何将多个查询从模型返回到 Controller ？
javascript - 如何通过 jquery 隐藏代码为 "."例如 1.1、1.2 的数据表行？
javascript - 如何(以编程方式)获得完全计算的 HTML(而不是源 HTML)？
javascript - 如何通过 jQuery 在 HTML 输入中存储值