我正在寻找要在网页（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>
这是photo-list.php文件：
<?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>
2为什么不使用PHP生成HTML，并在此时填充图像数组？保存服务器调用，为用户更快地加载页面，并且消除了竞争状况。
是否有可能在上一篇文章中将@ufo与slideshow.update（）一起使用。那会很有帮助。
谢谢