jquery - jQuery/HTML5 中的动态更新图像旋转器

Question

所以我知道有很多免费的图像旋转器等，它们使用 jQuery 之类的东西。然而，我的问题是，有没有办法在不刷新网站页面的情况下动态更新图像旋转器？

所以基本上你显示了十张图片，然后 1 小时后你有一个脚本删除旧图片添加十张新图片和一个新的 xml 文件，你需要刷新页面吗？或者脚本是否始终动态检查 xml 文件，因此您不必进行刷新。

附注它不必在 jQuery 中，可以是 HTML5 或类似的东西——我只想能够从文件夹中添加和删除图像，并让旋转器自动更新以使用文件夹中的内容

Answer 1

我认为，如果可能的话，最好在画廊上操作而不做任何可能需要重新初始化它的事情。下面的方法试图通过替换图库图像而不替换 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
});

因此，画廊插件将(希望)继续其旋转，而不会意识到它的图像已被更改。一些图库插件可能比其他插件更适合这一点 - 需要进行实验。