Fading Background Images

I'm using a simple script to change the background image of my website every X seconds. What I'd like to do is incorporate some sort of fade animation or a transition from one image to the next. What is the best way to achieve this?

I'm not very good with Javascript so PLEASE, bear with me. :)

<script type="text/javascript">
    var images = ['bg1.png', 'bg2.png', 'bg3.png'];
    v开发者_StackOverflow中文版ar curImage = 0;
    function switchImage()
    {
        curImage = (curImage + 1) % images.length
        document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
    }
    window.setInterval(switchImage, 5000);
</script>

I read over and over and dont understand please so please someone give me a working code so i can copy and paste and get rid of this annoying job. example here http://preferredmerchantservices.net/

It seems no one is using old-fashioned js scripts to achieve such kind of animations any more. I would recommend you to use jQuery or other javascript libraries which are basically an abstraction layer for browser javascript functionalities.

And also you can find a lot of examples, plugins, etc. for transition effects like the one you mentioned.

1. A plugin for transition effects: http://malsup.com/jquery/cycle/
2. jQuery website, which is really easy and took a couple of days for me to learn it : http:///www.jquery.com

Hope it helps.

• make a DIV of the same dimensions as your image
• set your image as the CSS background
• put the second "foreground" image in your DIV with zero opacity
• fade in the second image
• swap that image -> make it the CSS background of the DIV
• set the opacity of the foreground image to zero
• swap the foreground image for the next one
• repeat

Just in case you needed the code rewritten for jQuery. Here goes:

<script type="text/javascript">
    var images = ['bg1.png', 'bg2.png', 'bg3.png'];
    var curImage = 0;
    var timer;
    function switchImage() {
        $('body').css({'backgroundImage':'url(images/' + images[curImage] + ')'};
        curImage == images.length? curImage = 0; curImage++;
        clearInterval(timer);
        timer = setInterval(switchImage, 5000);        
    }
    timer = setInterval(switchImage, 5000);        
</script>

I would like to note that this doesn't fade-in/out a background image, however. To do that you could use a container for the background image. Something that adjusts on resize perhaps.

// Resize Handler
$(window).resize(function () {
    resizePages();
});

function resizePages() {

    var width = $(window).width();
    var height = $(window).height();

    $('.backgroundContainer').css({'width': width});

    /*
        .contentWrapper would be where all your page's content is placed
        .backgroundContainer is a class for a div placed out side teh contentWrapper
        It would have a lower z-index than .contentWrapper but higher than body.
    */


    /*
        This makes sure that the background image is the same height as 
        either the windows of the .contentWrapper (whichever is larger)
    */
    if (height > $('.contentWrapper').height()){
        $('.backgroundContainer').css({'height': height});
    } else {
        $('.backgroundContainer').css({'height': $('.contentWrapper').height()});
    }
}

You then could adjust the switch code to fade the background between transitions.