所以我理解有许多免费的图像旋转器等，使用像jQuery这样的东西。然而，我的问题是，有没有办法动态更新图像旋转器而不刷新网站页面？
所以基本上你要显示10张图片，然后1小时后你有一个脚本删除旧图片添加10个新图像和一个新的xml文件，你需要刷新页面吗？或者脚本是否总是动态检查xml文件，因此您不必进行刷新。
P.S。它不一定是jQuery，可能是HTML5或者喜欢 - 我只是想能够添加和删除文件夹中的图像，并让旋转器自动更新以使用文件夹中的内容
答案 0 :(得分：5)
我认为，如果可能的话，最好在画廊上进行操作而不做任何可能需要重新初始化它的事情。下面的方法试图通过替换图库图像来实现这一目标，而无需替换img节点本身。
首先，让我们假设服务器端代码已启动并正常工作，并通过任何方式返回json，当解码时相当于：
[
"images/aaa.jpg",
"images/bbb.jpg",
"images/ccc.jpg",
"images/ddd.jpg",
"images/eee.jpg",
etc.
]
然后：
$(function(){
var $galleryImgs = $('#myGallery img');//gallery img nodes in a jQuery wrapper.
var updateGallery = function() {
$.ajax({
url: 'getImageUrls.php', //or whatever
data: {
n: $galleryImgs.length //specify how many new image urls to fetch
},
dataType: 'json',
success: function(data) {
$.each(data, function(i, url) {
if($galleryImgs[i]) { //safety
$galleryImgs[i].src = url; //replace each gallery image in turn
}
});
}
});
};
var galleryInterval = setInterval(updateGallery, 60*60*1000);//60*60*1000 for one hour; 30*60*1000 for half an hour
});
因此，图库插件将（希望）继续旋转幸福地不知道它的图像已被更改。有些画廊插件可能比其他插件更容易接受 - 实验是必要的。
答案 1 :(得分：2)
就删除和替换文件而言，你必须做那个服务器端。你没有提到服务器语言，所以我建议在另一个问题上打开它。一旦弄明白，您可以让脚本使用ajax轮询服务器以获取更新。
查询看起来像这样：
refreshShow = function() {
$.ajax({
url: 'imagefeed.json',
dataType: 'json',
type: 'post',
data: {
gallery: 'homeGallery'
},
success: function(data) {
$('#homeGallery img').remove();
$.each(data, function(i, image){
$('#homeGallery').append(
$('<img />').attr('href', image.path)
)
});
}
});
};
然后你的民意调查：
$(function(){
setTimeout(function(){ refreshShow() }, 30000); //polls every 30 seconds for updates
});
如果JSON Feed会提供某些路径，也可能是字幕。在创建不同语言的JSON输出时，您可以找到大量关于SO的问题。请记住，这是示例代码，大多数幻灯片都比这复杂一点。
答案 2 :(得分：0)
我认为，文件夹中的图像具有不同的名称，因此您可能需要提供一个URL，您可以轮询该URL以获取新的文件名，可能是这样的：
返回json，如下所示：
{
images: ["i1.jpg", "i1.jpg", "i1.jpg", "i1.jpg", "i1.jpg"],
version: 12
}
然后，您可以经常向该网址发出ajax请求，查看版本号是否被碰撞，然后替换图片轮播中的图片。如果你找不到一个可以让你动态改变图像的东西，那么编写它应该非常简单。
这是一种类型，你只需要添加自动旋转： http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_api.html
答案 3 :(得分：0)
这样的事情可以通过使用服务器端语言和Ajax来实现。你没有提到一个，所以我将以PHP为例，但这个概念几乎就是：
A）启动旋转器并将图像加载到文件夹中。
B）使用setTimeout（）;创建一个函数，该函数将使用Ajax调用检查目录的PHP页面，并返回已检查目录中图像名称的json。
C）删除旋转器的当前图像，然后使用JSON中的新信息重新填充它。
一个例子是：
[PHP]
$listOfImages = new array();
foreach( glob("/uploads/*.jpg") as $file ){
array_push( $listOfImages, $file ); // gets an array of all the jpgs in the uploads directory
}
return json_encode( $listOfImages );
[jQuery的]
<script type='text/javascript'>
$(function($){
var slider = new Slider(); //Pseudo-class for a slider
setTimeout(function(){
$.ajax({
url:"update-slider-with-images.php",
type:"post",
dataType:"json",
success:function(data){
slider.clearAllImages(); //pseudo function to remove images from slider
var images = JSON.parse( data );
for(image in images){
slider.addImage( image ); //Psuedo function to add image to the rotation queue
}
slider.slide(); // Pseudo function to start the slider
}
});
},300000); // check every 6 minutes
});
</script>
这可能不是你需要的所有内容，因为你需要创建滑块类或者在我的示例中以其他方式重新实现该代码，但是如果你知道PHP，它应该足以让你自己开始。如果你不这样做，我认为把它转换成别的东西太难了。我知道Rails可以处理文件系统的东西，我确信ASP.Net也可以。
答案 4 :(得分：0)
我已经实现了这个并且正在工作，但我只是没有自动更改图像。我使用ajax请求
/basic_stats/graph.png?graph.type=IMAGE
其中/ basic_stats/graph.png只是我为特定视图配置的路由。如果您在图像链接中传递参数，则图像滑块不会在意，只要路径返回它所期望的png或jpg即可。在我的情况下，我有一个自动化的过程，在后台运行统计信息，然后将图像存储到Redis层，该层是/basic_stats/graph.png的视图？配置为轮询。然后我只查询request.params ['some_key_value']并返回一个图像作为响应对象。然后你根本不需要做任何ajax魔法，只需生成正确的响应对象。
config.add_route('ImageSlider', '/images/ImageSlider.png')
@view_config(route_name='ImageSlider')
def ImageSlider(request):
imgData = None
if 'graph.type' in request.params:
if request.params['image.name'] == 'ImageSlider1':
r_server = redis.Redis('127.0.0.1')
imgDataObj = r_server.get('ImageSlider1')
del r_server
imgData = pickle.loads(imgDataObj)
elif request.params['image.name'] == 'ImageSlider2':
r_server = redis.Redis('127.0.0.1')
imgDataObj = r_server.get('ImageSlider2')
del r_server
imgData = pickle.loads(imgDataObj)
return Response(body_file=imgData, content_type='image/png')
此示例使用Redis存储序列化图像数据，但您可以使用PIL ex轻松地从FS加载文件
imgData = Image.open("/images/ImageSlider1.png")
现在，您可以让视图以特定位置的任何图像进行响应。然后只需将您的图像位置传递给滑块
src="/images/ImageSlider.png?image.name=ImageSlider1"
src="/images/ImageSlider.png?image.name=ImageSlider2"
让您的视图调整动态响应的图像。 Redis允许您超时密钥并让外部进程重新填充密钥，以便将新图像提供给您的Web服务器。 注意，这可能无法扩展为您的移动图像数据，但对于基本统计报告的内部应用程序，这是我使用它的伟大，无缝快速。我没有加载测试它以查看上限是什么，但我们不会有很多并发用户。
无论您使用的是哪种框架，此示例都应该是完成任务的选项。
我想在Backbone.js中链接视图渲染调用以在任意更新期间更改图像src也可能有效但我还没有在Backbone.js兔洞中走得很远，而且这个概念可能仅限于Backbone.js。
答案 5 :(得分：0)
我有一个你可能感兴趣的简单 jQuery 方法。
示例中使用的Image Rotator是JW Image Rotator，它使用XSPF，RSS和ASX标记格式的外部文件。
它也可以是可下载演示提供的简单xml text file。您可以考虑使用Flicker，然后访问这些RSS源以简化播放列表。
对于您提到的第一个问题，通过简单的setTimeout在演示中显示更新图像旋转器而不刷新网页。它会重新加载之前更新过的相同的playlist.xml 文件或使用不同的播放列表文件。
为了解决您的第二个问题， playlist.xml 文件在指定时间重新加载时会变得简单，因为它会自动强制更新您在images文件夹中的内容（如果不使用RSS URL）例如）。
每当你覆盖文件时，例如 01.jpg到10.jpg ，那么在重新加载事件期间，由于 JW Image Rotator ，它将获取新文件检索它们。
这意味着没有时间戳或其他黑客强制重新加载。为了更进一步，您可以拥有一系列播放列表，这些播放列表可以自动循环以实现完全自动化的过程。
DEMO 中有很多注释和一些控制台日志消息来解释发生了什么，以便您可以将Demo的方法调整为任何其他Image Rotator或图像插件
这是一个DEMO on jsFiddle，它是教程版本。
此DEMO on jsFiddle不包含任何评论或控制台，因此您可以清楚地看到代码。
这是可下载的教程版本的pastebin。
要在本地尝试 DEMO ，您需要开源JW Image Rotator ，目前在v3.18，现在有JW水印，但 v3 .17 没有......它是压缩的HERE，它包含所有源文件，包括 .fla Flash文件。
DEMO 还包含指向 JW Image Rotator JavaScript API 命令的链接，这些命令甚至没有使用过......但可以随时自定义内容！