在jQuery/HTML5中动态更新Image Rotator

Question

所以我知道有许多免费的图像旋转器等,使用像jQuery这样的东西.我的问题是,有没有办法动态更新图像旋转器而不刷新网站页面？

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

PS它并不一定要在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
});

因此,图库插件将(希望)继续旋转幸福地不知道它的图像已被更改.一些画廊插件可能比其他插件更容易接受 - 必须进行实验.