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

Answer 2

如何添加一个拇指分页列表，在点击时更新背景图像，然后一两秒，它会自动开始淡入淡出下一个bg img？

HTML：

<div class="slideshow">
    <h1>Text</h1>
    <input type="button" value="Hello" />
</div>

<ul>
    <li><a href="#"><img src="http://placehold.it/50x50"></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/123456"></a></li>
    <li><a href="#"><img src="http://placehold.it/50x50/dbca98"></a></li>
</ul>

CSS：

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

ul {position: absolute; top: 125px; left: 75px;}

li {
    float: left;
    border: 1px solid #000;
    margin: 15px;

}

使用Javascript：

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;
}

在http://jsfiddle.net/tatygrassini/R4ZHX/75/一起查看所有内容。

Answer 3

您可以先调用

，而不仅仅是更改背景图片

   fadeOut()

然后更改源，然后调用

   fadeIn()

类似......

$('#image').fadeOut(500, function() {
        $(this).attr('src', 'new-image.png')
            .load(function() {
                $(this).fadeIn();
            });
    });

要使用各种图像，有许多解决方案，但您可以简单地遍历它们的列表。

Answer 4

你可以创建一个绝对定位的滑块插件来改变div中包含的图像。另外，你必须精灵背景。我用Jquery Tools tabs plugin实现了这个目标。

$(".slidetabs").tabs(".images > div", {

    // enable "cross-fading" effect
    effect: 'fade',
    fadeOutSpeed: "slow",

    // start from the beginning after the last tab
    rotate: true

// use the slideshow plugin. It accepts its own configuration
}).slideshow();

Answer 5

这是一个解决方案，不仅可以解决您的问题，还可以解决其他一些问题。在DOM上创建另一个DIV作为叠加层，并仅在此DIV上执行淡入淡出功能。它看起来好像内容正在淡入/淡出。这种方法也更高效，因为您只是淡化单个DIV而不是多个元素。这是一个例子：


$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
    // Step 1: change your content underneath the hidden div
    // Step 2: hide the overlay
    $('#containeroverlay').fadeOut('normal');
})

最重要的是，这种方法可以在IE6-8中使用，而不会搞砸div上可能包含的元素的字体别名。

使用背景图像的jquery幻灯片

5 个答案: