Change background images like this

Question

If you guys look at this web page: http://www2.scandvision.se/oresund10/

How did they fade away this background, disappear? When I check the source,

    <img id="wrapper-background" src="images/body-background-0.jpg" alt="Background" />

and I think some kind of script can be php or js, or both, that changes the background every 5 seconds: images / body-background-1.jpg

Images / body-background-2.jpg

Images / body-background-3.jpg

etc.

So how did they do it? an example would be great, as I want to learn how to do it. If I was going to do something like this, I think that I can only do a script in php, which will be randomly every time I update.

Thank you, this will expand my knowledge.

Answer 1

mootools. : http://mootools.net/forge/p/slideshow

Answer 2

-, "Prototype JS" "Script Aculo US", . : www.envolulm.fr

:

/ * HTML/

 <div id="slideshow">
  <p id="text1"><img src="/url/of/your/image1"/></p>
  <p id="text2"><img src="/url/of/your/image1"/></p>
  <p id="text3"><img src="/url/of/your/image1"/></p> 
  <p id="text4"><img src="/url/of/your/image1"/></p>
 </div>

CSS

#text1, #text2, #text3, #text4 {
  position:absolute;
  height:402px; // you can put other value...here
  width:850px; // you can put other value...here
}

Javascript

function changeimg(){

var sec = 6000; // Change each 6 secondes
 var paras = $$('#slideshow p'); // Grab element "<p>" of the div with slideshow for ID


 // For each element "<p>"
 paras.each(function(para){
    if(para.visible()){
    paraFade = para; // We stock the item which will disappear
    paraAppear = para.next(); // We got the next element (The one who wants to appear)

       //If it the last "p" element we come back to the first one
       if(paraAppear == undefined){
        paraAppear = paras[0];
       }
    }
 });
 Effect.Appear(paraAppear); // Script Aculo US animation
 Effect.Fade(paraFade); // Script Aculo US animation
 timer = setTimeout("changeimg()",sec); // Timer

} 

Event.observe(window, 'load', function() { changeimg(); }

, .

Answer 3

jquery - script, .

Answer 4

, , jquery "jquery innerfade"

-, .js, , jquery,