使用背景图像的jQuery幻灯片答案

【问题标题】：jquery slideshow using background images使用背景图像的jQuery幻灯片
【发布时间】：2011-03-04 17:20:15
【问题描述】：

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

我需要为此 div 创建背景图像的幻灯片。

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

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

有谁知道使用 jquery 的好方法吗？

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

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

【问题讨论】：

标签： javascript jquery slideshow background-image

【解决方案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

【讨论】：

【解决方案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/ 一起查看。

【讨论】：

【解决方案3】：

你可以先调用

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

   fadeOut()

然后换源，然后调用

   fadeIn()

类似...

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

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

【讨论】：

这不会改变 div 的背景图像。
谢谢，误读了问题。你能创建另一个绝对位于下方的 div 吗？

【解决方案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();

【讨论】：

【解决方案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 上可能存在的元素的字体别名。

【讨论】：