Pin Me

Smoothly Changing Background Images With jQuery

written by: vishalseafarer•edited by: Michele McDonough•updated: 2/20/2011

Almost every web developer has hated JavaScript at one point or the other. Then, along came jQuery and things have never been the same. This tutorial shows you how to use jQuery to smoothly change background images and give that extra nice look and feel to your website.

  • slide 1 of 2

    Using jQuery to Change Images

    To smoothly change background images using jQuery, you should either stack more than one image on each other, or store the images in a directory and use a callback function to load another image once the current image fades. I will show you a very simple approach.

    You will need a text editor to write the code and a browser to view the HTML page. If you are using Windows, you can use Notepad and save the file with the .html extension.

    For the ease of understanding, instead of setting the background image of the web page and then changing it, I will simply create a div element that holds the image that has to be changed. A few images are stacked on upon the other in the div element. Using jQuery, the first image is faded and the next image is shown. This is continued until the last image is shown after which the whole process of fading and showing the next image is started all over again.

    The code has been thoroughly commented so that you can easily understand what is happening in each step.

  • slide 2 of 2

    The Code

    jQuery - How to Smoothly Change Background Images <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>jQuery: How to Smoothly Change Background Images</title>

    <style type="text/css">

    body {

    margin:0;

    padding:0;

    width: 100%;

    }

    h1 {

    padding-left: 100px;

    font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;

    text-transform:uppercase;

    }

    </style>

    jQuery - How to Smoothly Change Background Images 2 

    <style type="text/css">

    /* The placement of the div object in the web page */

    div.rotator {

    position:relative;

    height:345px;

    margin-left: 15px;

    display: none;

    }

    /* Style for the rotator */

    div.rotator ul li {

    float:left;

    position:absolute;

    list-style: none;

    }

    /* Style for the image displayed */

    div.rotator ul li img {

    border:1px solid #ccc;

    padding: 4px;

    background: #FFF;

    }

    div.rotator ul li.show {

    z-index:500

    }

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <script type="text/javascript">

    function theRotator() {

    // The images are placed in a directory called 'images.' The name of the directory can be your choice but make sure you

    // enter the correct path in the source attribute of the <img> in the HTML part.

    //The opacity of all the images are set to 0 so that no image is loaded in the beginning until the entire page loads.

    $('div.rotator ul li').css({opacity: 0.0});

    //Display the first image by setting its opacity to 1

    $('div.rotator ul li:first').css({opacity: 1.0});

    //To change the background image every two seconds, call the change()

    //function every 2000 milliseconds. The time argument takes time in terms of

    //milliseconds and you can set it to your need.

    setInterval('change()',2000);

    }

    function change() {

    //This part of the code gets the first image.

    var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

    //Now get the next image and when you reach the last image, point it back to

    //the first image

    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

    //The fade-in effect is used for the next image and to display the image

    //with a higher z-index

    next.css({opacity: 0.0})

    .addClass('show')

    .animate({opacity: 1.0}, 1000);

    //This part of the code hides the current image so that the next image is seen.

    current.animate({opacity: 0.0}, 1000)

    .removeClass('show');

    };

    $(document).ready(function() {

    //Load the slideshow

    theRotator();

    $('div.rotator').fadeIn(1000); // works for all the browsers other than IE

    $('div.rotator ul li').fadeIn(1000); // IE tweak

    });

    </script>

    </head>

    <body>

    <h1>jQuery: How to Smoothly Change Background Images</h1>

    <div class="rotator">

    <ul>

    <li class="show"><a href="#"><img src="images/arch.jpg" width="500" height="313" alt="pic1" /></a></li>

    <li><a href="#"><img src="images/wave.jpg" width="500" height="313" alt="pic2" /></a></li>

    <li><a href="#"><img src="images/Freestyle.jpg" width="500" height="313" alt="pic3" /></a></li>

    </ul>

    </div>

    </body>

    </html>

    Use the code above to test how it works in your browser. This technique is used in image rotators, animated buttons, etc.