XML banner fader in jQuery

Here’s the XML code.

<!--?xml version="1.0" encoding="utf-8"?-->
<gallery fade="500" ontime="5000">
    <picture src="banners/banner1.jpg" href="http://www.google.com" target="_blank"></picture>
    <picture src="banners/banner2.jpg" href="http://www.yahoo.com" target="_blank"></picture>
    <picture src="banners/banner3.jpg" href="http://www.bing.com" target="_blank"></picture></gallery> 

The HTML code is very simple

<!-- Add JQuery Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<div id="banner"> 
           <a id="banner_href" href="#">
           <img id="banner_image" src="banners/banner1.jpg"  alt="Banner Image" ></a>
 </div> 

 JavaScript.jd Document

$(document).ready(function(){
    xmldata=new Array();         //initialise array for XML data
    fade=0;                                //time taken for transitions
    ontime=0;                           //time between transitions
    changenum=0;                    //current banner
    changetot=0;                      //total banners

    $("#banner").fadeTo(1,0);        //fade out the fallback banner

    $.ajax({                                            //get the XML data
              url: "banners.xml",                //URL to get the data from
              success: function(data) {      //if we succeed, set everything up. We don't expect failure.
                  $(data).find("picture").each(function()
                  {
                    xmldata.push($(this));                //add item into array
                 });
                 changetot=xmldata.length;                                             //get total length
                  ontime=eval($(data).find("gallery").attr("ontime"));    //get fade time
                 fade=eval($(data).find("gallery").attr("fade"));             //get time between fades
                 change_banner(changenum);                                         //change banner for first banner
                 }
        });
});

function change_banner(){
    data=xmldata[changenum];              //get current banner XML object
    img=$(data).attr("src");                    //retrieve variables
    href=$(data).attr("href");
    target=$(data).attr("target");

    $("#banner_href").attr("href",href);        //change variables on HTML
    $("#banner_href").attr("target",target);
    $("#banner_image").attr("src",img);

    //increment banner value, this is executed BEFORE the callback as we already have the variables.
    changenum++;
    if(changenum>=changetot)                //check for banner value bounds
        changenum=0;   

    cache = document.createElement('img');            //create an image
    //pre-cache next image (means the browser will load it instantly)            cache.src = $(xmldata[changenum]).attr("src");
   //fade banner in, then wait, then fade out and call back to this function. 
   $("#banner").fadeTo(fade,1).fadeTo(ontime,1).fadeTo(fade,0,change_banner);    
}

Read More