在jQuery / HTML5中动态更新Image Rotator

我认为,如果可能的话,最好在画廊上进行操作而不做任何可能需要重新初始化它的事情.下面的方法试图通过替换图库图像来实现这一目标,而无需替换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
});

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