Question

我正在尝试创建一个遍历文件夹中所有内容的网页，并以幻灯片形式显示其内容。以下是我的基本代码，我尝试从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>

Answer 1

有一个错误，从不使用带有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>

如果您想稍后动态添加更多幻灯片，可以在脚本标记中创建图像数组。希望以上工作

jQuery幻灯片问题 - 幻灯片不起作用

1 个答案: