How to loop a css background image with Jquery every few seconds?

Question

I would like to change a header css background image every few seconds, so its look like a slideshow.

For example first 2 seconds be:

body#home h1#siteH1 { background:url(../images/header1.jpg) no-repeat;}

Next 2 seconds be:

body#home h1#siteH1 { background:url(../images/header2.jpg) no-repeat;}

Next 2 seconds be:

body#home h1#siteH1 { background:url(../images/header3.jpg) no-repeat;}

And then loop again to header1.

If anyone knows how to do the transition with a fading effect, then it would be simply perfect.

body#home h1#siteH1 is a highly inefficient selector. Why not just use #siteH1 ? — Chetan S
– Chetan S, Commented Sep 3, 2009 at 22:36
For my information, is this also the case with jQuery selectors? — Ropstah
– Ropstah, Commented Sep 4, 2009 at 18:24

Ropstah · Accepted Answer · 2009-09-04 16:14:27Z

19

Now with fade

Try this:

var currentBackground = 0;
var backgrounds = [];
backgrounds[0] = '../images/header1.jpg';
backgrounds[1] = '../images/header2.jpg';
backgrounds[2] = '../images/header3.jpg';

function changeBackground() {
    currentBackground++;
    if(currentBackground > 2) currentBackground = 0;

    $('body#home h1#siteH1').fadeOut(100,function() {
        $('body#home h1#siteH1').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('body#home h1#siteH1').fadeIn(100);
    });


    setTimeout(changeBackground, 2000);
}

$(document).ready(function() {
    setTimeout(changeBackground, 2000);        
});

edited Sep 4, 2009 at 16:14

answered Sep 3, 2009 at 17:45

Ropstah

17.9k27 gold badges123 silver badges199 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sergio del Amo Over a year ago

your code execute inmediately. Does not wait anytime before changing the background and does not come to the initial background again.

Sergio del Amo Over a year ago

Basically, I would like to loop beetween background images

Sergio del Amo Over a year ago

Thanks, it works. Is there a way to fadeOut the background and fadeIn the next?

Sergio del Amo Over a year ago

I did not wont to remove you up vote. But If I vote you up twice it remove the old vote and says "Vote too old to be change, unless this answer is edited"

Sean Over a year ago

Instead of using 2 times setTimeout, it would be easier to use setInterval.

Slee · Accepted Answer · 2009-09-03 17:41:25Z

3

checkout the queue functionality:

jQuery Queue

answered Sep 3, 2009 at 17:41

Slee

28.4k55 gold badges151 silver badges249 bronze badges

Comments

Uzair Hayat · Accepted Answer · 2020-08-18 09:20:43Z

Late to the party, but here's what I just came up with for similar requirement.

<script type="text/javascript">

    // populate image set
    var imageArray = [
        "1.jpg",
        "2.jpg",
        "3.jpg",
        "4.jpg"
    ];

    // in milliseconds
    var fadeSpeed   = 1000;
    var timeout     = 3000;


    function fadeInFront (i) {
    
        $('#faderFront').css( {
            "background-image" : "url(" + imageArray[i] + ")"
        });
    
        $('#faderFront').fadeIn(fadeSpeed);
    
        i++;
    
        if ( i == imageArray.length ) {
            i=0;
        }

        setTimeout(function() {
            fadeOutFront(i);
        },timeout);
    
    }

    function fadeOutFront (i){
    
        $('#faderBack').css( {
            "background-image" : "url(" + imageArray[i] + ")"
        });
    
        $('#faderFront').fadeOut(fadeSpeed);
    
        i++;
    
        if ( i == imageArray.length ) {
            i=0;
        }
    
        setTimeout(function() {
            fadeInFront(i);
        },timeout);
    
    }
    
    function preload(arrayOfImages) {
    
        $(arrayOfImages).each(function() {
    
            $('<img/>')[0].src = this;
    
        });
    
    }

    $(document).ready(function(){

        preload(imageArray);

        setTimeout(function() {
            fadeOutFront(0);
        }, timeout);

    });

</script>

<style type="text/css">

    .imageContainer {
        width: 700px;
        height: 400px;
        position: relative;
    }
    
    #faderBack,
    #faderFront,
    #inFrontOfBoth {
        position: absolute;
        top: 0; left: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }

</style>
   
<div id="container">

    <div class="imageContainer">
        
        <div id="faderBack"></div>
        <div id="faderFront" style="background-image: url('1.jpg');"></div>
        <div id="inFrontOfBoth">Hello World</div>

    </div>

</div>

Collectives™ on Stack Overflow

How to loop a css background image with Jquery every few seconds?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related