Fondu enchainé

<img id="banniere" src="images/banniere1.png" alt="banniere" title="mon site de noob" style="-moz-opacity:100%; filter:alpha(opacity=100);" />'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// ******************************************************
// Variables globales, Init
// ******************************************************
var b = new Array();
	b[0] = new Image(); b[0].src = "images/banniere1.png";
	b[1] = new Image(); b[1].src = "images/banniere2.png";
	b[2] = new Image(); b[2].src = "images/banniere3.png";
	b[3] = new Image(); b[3].src = "images/banniere4.png";
	b[4] = new Image(); b[4].src = "images/banniere5.png";
	b[5] = new Image(); b[5].src = "images/banniere6.png";
	b[6] = new Image(); b[6].src = "images/banniere7.png";
// Je sais j'aurais pu me fendre d'une boucle mais au départ je n'avais que 2 images

// On démarre sur l'image 0 puis au bout du premier timeout, on passe sur l'image 1
	var pic_number = 1;

// Changement d'image toutes les n secondes
	var pic_delay = 6000;


// ******************************************************
function $(id) {
// ******************************************************
var $ = document.getElementById(id);

$.fadeIn = function(delay,callbk,out) {
    var _this = this;
    for (i = 1; i <= 100; i++) {
      (function(j) {
            setTimeout(function()
			{  
                  if (out == true) j=100-j;
                  _this.style.opacity = j/100; // IE
                  _this.style.MozOpacity = j/100; // FF
                  _this.style.KhtmlOpacity = j/100; // Konq
                  _this.style.display="block"; 
                   if (j == 100 && callbk != undefined) {callbk.call(_this);}
                   else if (out == true && callbk != undefined && j == 0) {callbk.call(_this);}
                  _this.style.filter = "alpha(opacity=" + j + ");";	
			}, j*delay/100); // non linéaire
                 
        })(i);     
    }
};

$.fadeOut = function(delay,callbk) {
    $.fadeIn(delay,callbk,true);
};

return $;
}
	
// ******************************************************
function animation()
// ******************************************************
 {
	// Cas de n images alternatives contenues dans le tableau b
		if (pic_number > b.length - 1 ) pic_number = 0;

	// Récupère les infos de l'image en cours dans la balise <img> avec id = banniere
		var img_encours = document.getElementById("banniere");
		
	// Fade Out
		$("banniere").fadeOut(1000);

	// Attribution de la nouvelle source (affichage de la nouvelle image)
		img_encours.setAttribute("src", b[pic_number].src);
	
	// Fade In
		$("banniere").fadeIn(1000);

	// on passe à l'indice d'image suivante
		pic_number++;
	
	// Intervalle de n secondes entre chaque image
		window.setTimeout("animation()", pic_delay);
 }
 
 // Démarrage de l'animation au bout de n secondes
		window.setTimeout("animation()", pic_delay);