Javascript 带有动态上传照片的HTML照片幻灯片
我正在寻找一个用于网页（HTML、php和JS/jQuery）的照片幻灯片。它应该支持全屏和动画以及大量图像。幻灯片应显示特定文件夹中的所有图像。到目前为止，我正在使用Superslides（），它工作得非常好 但这是我的问题。幻灯片将在活动期间放映，我已经为照片上传开发了一个PHP脚本，将图像放入指定的文件夹中。幻灯片（可能是超级幻灯片的修改版本或从头开始的新项目）应首先显示所有新图像，然后在第一次显示所有新图像后，应检查是否上传了较新的图像。如果是，它应该显示它们。否则它应该从旧图像开始一个循环。在检查是否添加了新图像之前，它不应该显示所有旧图像！它可以按预定的方式检查更新的图像，也可以接收“推送通知”（我不知道这是否适用于JS，可能适用于AJAX？） 有什么现成的或教程可以遵循吗？请记住，我不是一个互联网技术专家（我做桌面开发的工作），我相当熟练的PHP，但不与JS 更新：这就是我目前正在做的。。。这样就不行了！超滑块没有正确初始化（我想它没有计算正确的图像数）。此外，最新照片没有“优先”队列。最后，图像列表不会以编程方式更新Javascript 带有动态上传照片的HTML照片幻灯片,javascript,php,jquery,html,slideshow,Javascript,Php,Jquery,Html,Slideshow,我正在寻找一个用于网页（HTML、php和JS/jQuery）的照片幻灯片。它应该支持全屏和动画以及大量图像。幻灯片应显示特定文件夹中的所有图像。到目前为止，我正在使用Superslides（），它工作得非常好 但这是我的问题。幻灯片将在活动期间放映，我已经为照片上传开发了一个PHP脚本，将图像放入指定的文件夹中。幻灯片（可能是超级幻灯片的修改版本或从头开始的新项目）应首先显示所有新图像，然后在第一次显示所有新图像后，应检查是否上传了较新的图像。如果是，它应该显示它们。否则它应该从旧图像开始一个
<!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>
测试照片播放器
$（文档）.ready（函数（）{
$.ajax({
url:“photo list.php”，
数据类型：“json”，
成功：功能（数据）{
$.each（数据、函数（i、文件名）{
$（“#要测试的幻灯片”）。附加（“”）；
});
}
});
});
$（函数（）{
$（“#幻灯片”）。超级幻灯片({
hashchange：是的，
播放：4000
});
$（'#slides'）。在（'mouseenter'，function（）上{
$（this.superslides（'stop'）；
console.log（'Stopped'）
});
$（'#slides'）。在（'mouseleave'，function（）上{
$（this.superslides（'start'）；
console.log（'Started'）
});
});
<?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（）两种解决方案： 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>
$（文档）.ready（函数（）{
$.ajax({
url:“photo list.php”，
数据类型：“json”，
成功：功能（数据）{
$.each（数据、函数（i、文件名）{
$（“#要测试的幻灯片”）。附加（“”）；
});
//现在触发幻灯片脚本
$（“#幻灯片”）。超级幻灯片({
hashchange：是的，
播放：4000
});
$（'#slides'）。在（'mouseenter'，function（）上{
$（this.superslides（'stop'）；
console.log（'Stopped'）
});
$（'#slides'）。在（'mouseleave'，function（）上{
$（this.superslides（'start'）；
console.log（'Started'）
});
}
});
});
2为什么不在PHP中生成HTML，并在此时填充图像数组？保存服务器调用，为用户更快地加载页面，消除争用条件。堆栈溢出是帮助解决编程问题的地方，而不是讨论板。我们希望代码吃掉bro！你需要js从输入中获取图像并将其附加到幻灯片如果你当前的滑块将图像存储在数组中，你可以使用拼接方法在你想要的位置插入新元素。我建议你编辑你的问题，以包含你正在使用的代码，这样我们可以更好地帮助回答问题？这不是我的主要问题。。。问题是，我希望幻灯片根据新添加的图像自动更新自身（必须先显示它们）。无论如何，你应该得到奖励，因为你是唯一一个回答的人！谢谢我很快检查了文档，没有任何东西可以让库在图像更改时“重新加载”。但是有一个slideshowe.update（）-请查看
superslides\u test.js