Modification des images de fond comme celui-ci

Question

Si vous les gars Consultez cette page: http://www2.scandvision.se/oresund10/

Comment ont-ils fait ce fondu de fond en fondu? Quand je vérifie la source de cette

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

et je pense Theres une sorte de script php ou peut-être js, ou les deux, que toutes les 5 s change le fond: images/body-background-1.jpg

images/body-background-2.jpg

images/body-background-3.jpg

et ainsi de suite ..

So Comment ont-ils fait ça? un exemple serait génial, car je veux apprendre à le faire. Si je devais faire quelque chose comme ça, je pense que je ne parviendrais à faire un script en PHP qui aléatoire à chaque fois que vous vous rafraîchissez.

Merci, cela élargir mes connaissances

Answer 1

Ils utilisent le framework mootools. Check this out: http://mootools.net/forge/p/slideshow

Answer 2

Le jquery cycle plugin est un script simple à faire cet effet.

Answer 3

Je pense que vous pouvez avoir le même effet si vous utilisez un plugin jquery appelé « jquery innerfade »

Voici un site où vous pouvez obtenir le fichier .js de celui-ci, bien sûr vous avez besoin de l'utiliser jquery

Inner Fade

Answer 4

Je l'ai fait une fois sur un site Web, je l'utilise « Prototype JS » et « Script Aculo US » mais vous pouvez facilement faire la même chose sans ces bibliothèques. Vous pouvez voir un exemple ici: www.envolulm.fr

I extrait ci-dessous et de traduire quelques commentaires de mon code:

/* Dans mon HTML PAGE */

<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 
} 

fonction 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's 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(); } 

Espérons que cela peut vous aider.