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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
function boxFading(BoxAnim,interval){
this.boxAnim = this.getElement(BoxAnim);
this.listeImage = new Array();
this.interval = interval*1000;
this.IsIE=!!document.all;
// permet de définir l'image a afficher
this.currentIndex = 0 ;
this.imgMax = 0;
var temp = this;
//Pour combler un bug ie, on attend le chargement complet de la page
if ( typeof(window.addEventListener) != "undefined" )
window.addEventListener( "load", function(){
temp.init()
}, false );
else{
window.attachEvent( "onload", function(){
temp.init()
} );
}
}
boxFading.prototype.changeImage = function(){
var next = (this.currentIndex+1 > this.imgMax) ? 0:this.currentIndex+1;
this.fade(100,0,this.listeImage[this.currentIndex]);
this.fade(0,100,this.listeImage[next]);
if(this.currentIndex == this.imgMax){
this.currentIndex = 0;
}
else{
this.currentIndex++;
}
}
boxFading.prototype.init = function(){
//On récupère toutes les images de la div
this.listeImage = this.boxAnim.getElementsByTagName('img');
//On assigne la valeur maximum
this.imgMax = this.listeImage.length-1;
this.listeImage[0].style.display = "block";
//Assignation du timer sur chaque image
for(var i = 0 , l = this.listeImage.length ; i < l ; i++){
this.listeImage[i].timer = null;
//Ajout du filtre pour combler un bug ie
if(this.IsIE)
{
this.listeImage[i].style.filter=(i == 0) ?'alpha(opacity=100)':'alpha(opacity=0)';
this.listeImage[i].filters[0].opacity=(i == 0) ? 100:0;
}
else
{
this.listeImage[i].style.opacity=(i == 0) ? 1:0;
}
}
var temp = this;
//On lance la méthode permettant de changer l'image
try {
var test = setInterval(function(){
temp.changeImage()
}, this.interval);
}
catch(err){
}
}
boxFading.prototype.getElement = function(element){
if(typeof(element) == "string"){
return document.getElementById(element);
}
else if(typeof(element) == "object"){
return (element);
}
else {
return null;
}
}
//Méthode permettant d'effectuer l'effet de fading sur un objet
boxFading.prototype.fade = function(start, end, objectToFade){
if (start == end) {
return false
}
objectToFade.style.display = "block";
this.IsIE ? objectToFade.filters[0].opacity = start : objectToFade.style.opacity = start / 100;
start >= end ? start -= 5 : start += 5;
var temp = this;
clearTimeout(objectToFade.timer);
if (start != end) {
objectToFade.timer = setTimeout(function(){
temp.fade(start, end , objectToFade);
}, 25);
}
else {
if(end == 0)
{
objectToFade.style.display = "none";
}
clearTimeout(objectToFade.timer);
}
}
var box1 = new boxFading('toto',5);
var box2 = new boxFading('titi',2);
var box3 = new boxFading('tata',5);
var box4 = new boxFading('tutu',5);
var box5 = new boxFading('tete',5); |
3 diaporamas automatiques javascript sur la meme page web
Répondre avec citation
Suis-je compréhensible?
Partager