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

jQuery Slideshow Issues - Slideshow Not Working

本文关键字：幻灯片 不起作用 问题 jQuery      更新时间：2023-09-26

我正在尝试创建一个网页，浏览文件夹中的所有内容，并以幻灯片的形式显示其内容。下面是我的基本代码，我试图从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标记中创建图像阵列。希望以上工作

相关文章：