我有以下代码。它的作用是，循环遍历目录中的所有图片，并将它们与之前保存的 ID 进行比较。到目前为止效果很好。
现在我不只是想显示图片，而是将它们包含在这些精美的 jQuery 幻灯片之一中(这里我想使用 Cycle 插件: http://jquery.malsup.com/cycle/ )。我猜想，PHP 代码是在服务器端执行的，这就是幻灯片到目前为止无法按预期工作的原因。那是对的吗？知道如何将其组合起来以使 slider 正常工作吗？或者说在这个组合中这是不可能的？
编辑:用基本的 jQuery Slideshow Cycle2 包围 PHP 代码
<body>
<div class="cycle-slideshow">
<?php
$selection = $_GET["selection"];
$selectionAsArray = explode(",", $selection);
//print_r($selectionAsArray);
$dir="../../img";
$againAllPics = scandir($dir);
//set counter to -2 to skip . & .. & other element in Folder and start
//with first pictureId = 1
//loop over all selected Ids and compare them with the counter (Id)
//of the freshly loaded pictures from the directory; display them if Ids match
$i=0;
for($i; $i < count($selectionAsArray); $i++) {
$counter = -2;
foreach ($againAllPics as $pic) {
$picinfo = pathinfo($dir."/".$pic);
if($selectionAsArray[$i] == $counter) {
?>
<img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>"
width="960" height="540" />
<?php
};
$counter++;
}
}
?>
</div>
</body>
编辑:HTML 输出
<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />
</div>
</body>
如果我将其放入 HTML 文件中，它就可以正常工作。
最佳答案
由于您的代码已经输出了 img 标记，为了让您更好地了解如何组合 jQuery 插件，这就是我要做的:
查看基本示例的源码:http://jquery.malsup.com/cycle/basic.html然后用您的代码替换您看到的 img 标记:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div class="slideshow">
<?php
$selection = $_GET["selection"];
$selectionAsArray = explode(",", $selection);
$dir="../../img";
$againAllPics = scandir($dir);
//loop over all selected Ids and compare them with the counter (Id) of
//the freshly loaded pictures from the directory; display them if Ids match
$i=0;
for($i; $i < count($selectionAsArray); $i++) {
//skip the . and .. elements
$counter = -2;
foreach ($againAllPics as $pic) {
$picinfo = pathinfo($dir."/".$pic);
if($selectionAsArray[$i] == $counter) {
?>
<img u="image" src="<?php echo $picinfo['dirname']
."/".$picinfo['basename'];?>" width="200" height="200" />
<?php
};
$counter++;
}
}
?>
</div>
</body>
</html>
您应该能够像执行脚本一样运行它:将其另存为 slideshow.php 并将其放在与您发布的脚本相同的位置，然后访问 http://www.yourwebsite.com/your/dir/slideshow.php。
我已根据演示将图像设置为 200x200px，因此您可能需要编写一些代码来根据相关的宽度和高度比率更改尺寸。希望这能让您了解如何结合 jQuery、HTML 和 PHP。
你是对的，PHP 代码在服务器端执行，其余部分将在客户端执行。当您的服务器收到页面请求时，PHP 将生成 HTML，然后将其作为页面的一部分传递给您。然后 JavaScript 将由您的浏览器执行。
关于javascript - 结合 PHP 和 jQuery 循环图片、匹配 ID 并在幻灯片中输出图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24267701/