我正在寻找一个照片幻灯片在网页(HTML, php和JS/jQuery)中使用。它应该支持全屏和动画以及大量的图像。幻灯片应该显示特定文件夹中的所有图像。到目前为止，我正在使用Superslides (http://archive.nicinabox.com/superslides)，它运行得非常好。
但我的问题是。幻灯片将在活动期间投影，我已经开发了一个用于照片上传的PHP脚本，该脚本将图像放入指定的文件夹中。幻灯片(可能是Superslides的修改版本或从头开始的新项目)应该首先显示所有新图像，然后在第一次显示所有新图像之后，它应该检查是否上传了新图像。如果是，它应该显示它们。否则，它应该开始一个旧图像的循环。在检查是否添加了新图像之前，它不应该显示所有旧图像!它可以以预定的方式检查新图像，或者它可以接收"推送通知"(我不知道这是否可能与JS，也许与AJAX?)。
有什么现成的或教程可以遵循吗?请记住，我不是互联网技术专家(我做桌面开发的工作)，我对PHP很熟练，但不懂JS…
更新:这是我到目前为止所做的…这样就行不通了!Superslides没有正确初始化(我想它没有计算正确的图像数量)。此外，也没有最新照片优先的"优先"队列。最后，图像列表不会以编程方式更新。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST PHOTO PLAYER</title>
<link rel="stylesheet" href="css/superslides.css">
</head>
<body>
<div id="slides">
<div class="slides-container" id="slides-foto-test">
</div>
<nav class="slides-navigation">
<a href="#" class="next">Next</a>
<a href="#" class="prev">Previous</a>
</nav>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$.ajax({
url: "photo-list.php",
dataType: "json",
success: function (data) {
$.each(data, function(i,filename) {
$("#slides-foto-test").append("<img src='" + filename + "'>");
});
}
});
});
</script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.animate-enhanced.min.js"></script>
<script src="js/jquery.superslides.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#slides').superslides({
hashchange: true,
play: 4000
});
$('#slides').on('mouseenter', function() {
$(this).superslides('stop');
console.log('Stopped')
});
$('#slides').on('mouseleave', function() {
$(this).superslides('start');
console.log('Started')
});
});
</script>
</body>
</html>
<?php
$filenameArray = array();
$handle = opendir(dirname(realpath(__FILE__)).'/images/a-folder/');
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
array_push($filenameArray, "images/a-folder/$file");
}
}
echo json_encode($filenameArray);
?>
这很可能是"竞态条件"。
顶部的代码($( document ).ready())说"当DOM加载时，进行服务器查询。当服务器查询响应时，填充HTML图像。"
你的代码在底部说"当DOM被加载时，用给定的图像开始幻灯片"。
虽然幻灯片代码应该在AJAX请求触发后立即触发，但它将在AJAX响应之前操作(某些极端情况除外)。
因此，您将在一个未填充的图像数组上开始幻灯片。
两个解决方案:
1在AJAX响应之后，填充HTML并在该点开始幻灯片播放
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.animate-enhanced.min.js"></script>
<script src="js/jquery.superslides.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$( document ).ready(function() {
$.ajax({
url: "photo-list.php",
dataType: "json",
success: function (data) {
$.each(data, function(i,filename) {
$("#slides-foto-test").append("<img src='" + filename + "'>");
});
// Now trigger the slideshow script
$('#slides').superslides({
hashchange: true,
play: 4000
});
$('#slides').on('mouseenter', function() {
$(this).superslides('stop');
console.log('Stopped')
});
$('#slides').on('mouseleave', function() {
$(this).superslides('start');
console.log('Started')
});
}
});
});
</script>