我正在尝试创建一个网页,浏览文件夹中的所有内容,并以幻灯片的形式显示其内容。下面是我的基本代码,我试图从glob()
中获得结果,并显示文件夹pictures/
中的所有.jpg文件。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
background-color: white;
}
</style>
</head>
<body>
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-loader=true
data-cycle-timeout="0"
data-cycle-prev="#prev"
data-cycle-next="#next"
>
<?php
$folder = 'pictures/';
$filetype = '*.jpg';
$files = glob($folder.$filetype);
$count = count($files);
for ($i = 0; $i < $count; $i++) {
echo '"'; echo '<img src="'.$files[$i].'" width="80%" height="60%"/>'; echo '"';
}
?>
</div>
</body>
</html>
有一个错误,永远不要使用带有id的脚本标记,我认为这是错误的。只需删除脚本标签
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
background-color: white;
}
</style>
</head>
<body>
<div class="cycle-slideshow">
<div class="cycle-prev" style="position:relative;float:left;cursor:pointer">PREV</div>
<div class="cycle-next" style="position:relative;float:right;cursor:pointer">NEXT</div>
<?php
$folder = 'pictures/';
$filetype = '*.jpg';
$files = glob($folder.$filetype);
$count = count($files);
for ($i = 0; $i < $count; $i++) {
echo '<img src="'.$files[$i].'" width="80%" height="60%"/>';
}
?>
</div>
</body>
</html>
如果以后要动态添加更多幻灯片,可以在script标记中创建图像阵列。希望以上工作