Question

我需要通过更改div的背景图像来创建自己的图像滑块。我已经这样做但想要添加淡入/淡出过渡效果。

到目前为止，我有：

    var now = 0;
    var int = self.setInterval("changeBG()", 5000);
    var array = ["[[*HomeImage1]]", "[[*HomeImage2]]", "[[*HomeImage3]]", ];


    function changeBG(){
        now = (now+1) % array.length ;
        $('.heroslide').fadeOut(300).delay(1000).css('background-image', 'url("' + array[now] + '")');
        $('.heroslide').fadeIn(300);

    }

但是我可能会尝试将转换和css更改为正确的顺序。

有人能指出我正确的方向吗？

Answer 1

您应该尝试使用递归函数：

var now = 0;
var int = self.setInterval("changeBG()", 5000);
var array = ["[[*HomeImage1]]", "[[*HomeImage2]]", "[[*HomeImage3]]", ];

function changeBG(){
    now = (now+1) % array.length ;
    // Fade out
    $('.heroslide').animate({opacity:0}, function(){
         // Change, fade in, trigger function after 5 seconds again.
         $('.heroslide')
             .css('background-image', 'url("' + array[now] + '")')
             .animate({opacity:1}, function(){
                 setTimeout(changeBG, 5000);
             });
    });
}

现在只需拨打changeBG()一次即可开始制作动画！

如何淡化div，改变背景图像并在循环内淡入？

1 个答案: