javascript - 使用背景图像的 jquery 幻灯片

Question

我有一个当前有静态背景图像的 div。

我需要为这个 div 创建背景图片的幻灯片。

我可以通过设置超时然后更改 CSS 中的背景图像来实现此目的，但这不是很优雅。

理想情况下，我希望淡出和淡入背景图像，但 div 包含其他页面元素，因此我无法以任何方式改变不透明度。

有谁知道使用 jquery 执行此操作的好方法吗？？

这里有一些淡出/淡入但也淡出 div 内容的代码。

$("#slideshow").fadeOut(5000, function(){
    $("#slideshow").css('background-image','url(myImage.jpg)');
    $("#slideshow").fadeIn(5000);
});

Answer 1

HTML:

<div class="slideshow"></div>

CSS:

.slideshow
{
    position: relative;
    width: 350px;
    height: 150px;
}
.slideshow img
{
    position: absolute;
    width: 350px;
    height: 150px;
    z-index:-1;
}

jQuery

var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;

doSlideshow();

function doSlideshow()
{
    if($('.slideshowimage').length!=0)
    {
        $('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
    }
    else
    {
        slideshowFadeIn();
    }
}
function slideshowFadeIn()
{
    $('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
    if(nextimage>=images.length)
        nextimage=0;
}

jsfiddle Demo