javascript - jquery slideshow using background images - Stack Overflow

admin管理员组

文章数量:1289623

I have a div which currently has a static background image.

I need to create a slideshow of background images for this div.

I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.

I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.

Does anyone know of a good way to do this using jquery??

Here's some code which fades out/in but fades out the contents of the div too.

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

I have a div which currently has a static background image.

I need to create a slideshow of background images for this div.

I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.

I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.

Does anyone know of a good way to do this using jquery??

Here's some code which fades out/in but fades out the contents of the div too.

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

• javascript
• jquery
• slideshow
• background-image

Share Improve this question Follow edited Mar 4, 2011 at 17:26 Tom asked Mar 4, 2011 at 17:20 TomTom 13k5050 gold badges153153 silver badges247247 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

How about adding a thumbs pagination list, to update the background image on click, and then, a second or two, and it starts fading in and out with the next bg img automatically?

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

See it all together at http://jsfiddle/tatygrassini/R4ZHX/75/.

Instead of just changing the background image, you could first call

   fadeOut()

then change source, and then call

   fadeIn()

something like...

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

To use a variety of images, there are a number of solutions, but you could simply iterate through a list of them.

You can create an positioned absolutely and with a slider plugin change the images contained in the div. Otherwize you have to sprite the background. I achieved this with the 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();

Here is a solution that not only addresses your problem, but will also solve some other problems as well. Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:

$('#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');
})

Most importantly, this approach will work in IE6-8 without screwing up the font aliasing of elements you may have on the div.

本文标签： javascriptjquery slideshow using background imagesStack Overflow