Javascript and Prototype Image Transitions

Language: HTML / XHTML

View as text

   <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script> 
   
   <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
 

  <div class="clear"></div>
  <h3>Banner Crossfading</h3>
  
  <div id="banner">
    <img src="http://www.uwec.edu/images/experience5_1.jpg" />
  </div>
  
   <script type="text/javascript" charset="utf-8">
    
    delay = 5000;
    
    images = ["http://www.uwec.edu/images/experience5_1.jpg",
     "http://www.uwec.edu/images/experience4_1.jpg",
     "http://www.uwec.edu/images/experience3_1.jpg",
     "http://www.uwec.edu/images/experience2_1.jpg"]
                   
      var last_frame = images.length;
      var xfade = $("banner");
      xfade.style.position = "relative";
      xfade.innerHTML = "";
    
        for(var i = 0; i < images.length; i++) {
            xfade.innerHTML += '<img style="position:absolute;top:0; z-index:' +
             (100-i) + '" src="' + images[i] + '" id="image_' + i + '"/>'
        }
        
      var i = 0;
      setInterval('fader()',delay);
    
    
    function fader(){
            Effect.Fade("image_" + i , { duration:1, from:1.0, to:0.0 });
            i++;
            if(i == last_frame) i = 0;
            Effect.Appear("image_" + i, { duration:1, from:0.0, to:1.0 });

    }
 
  </script>