如何在javascript中改变背景图像的顺序

Question

我有一个div与2图像的background-image与CSS代码:

background: url(img/over.png),url(img/bg.png);

这个代码首先显示bg.png，然后显示over.png

现在我想知道如何改变在JavaScript中动态显示图像的顺序?

Answer 1

我在我的一个应用中使用过这个，如果你有一个背景图像数组，那就太好了

显示图像1的技巧是background-size:100% 100%, 0% 100%;，第二个图像是background-size:0% 100%, 100% 100%;

function sliderAnimation(ind){
    //console.log(ind);
    var slider = $('#slideout'); //#slideout is having your background images
    var l = slider.css('background-image').split(',');
    if(slider.length){
        var size = [], position = [];
        var allItemsLen = l.length;
        for(var i=0; i<allItemsLen;i++){
            if(i<ind){
                size.push('0% 100%');
                position.push('left center');
            }else if(i==ind){
                size.push('100% 100%');
                position.push('right center');
            }else if(i>ind){
                size.push('0% 100%');
                position.push('right center');
            }
        }
        if(ind==allItemsLen-1){
            size[0] = ('0% 100%');
            position[0] = ('right center');
            ind = 0;
        }else if(ind==0){
            size[allItemsLen-1] = ('0% 100%');
            position[allItemsLen-1] = ('left center');
            ind++;
        }else ind++;
        slider.css({'background-size': size.join(','),'background-position': position.join(',')});
        //when = true;
    }
    homeSLideInt = setTimeout(function(){sliderAnimation(ind)},5000);
}

用sliderAnimation(0)调用一次，它将每5秒循环一次。