Discussion :

[francoisclb]

Bonjour,
je débute en JS et j’essaie de créer un script pour faire un diaporama automatique.

J'ai bien réussi à le créer sauf que maintenant j'aimerai faire un fondu sur entre chaque image.

Voici mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var num = 0;
function diapHome(bloc) {
	if( num != 4 ) {
		num = num + 1;
	}
	else {
		num = 1;
	}
	document.getElementById(bloc).style.backgroundImage = "url(img/bgBandeau" + num + ".jpg)";
}
/*function bkgFadeOut(){
	$('#bandeau1').fadeOut();
}
function bkgFadeIn(){
	$('#bandeau1').fadeIn();
}*/
setInterval( function(){ diapHome("bandeau1") }, 10000 );
/*setInterval(function(){bkgFadeOut();}, 9900);
setInterval(function(){bkgFadeIn();}, 10000);*/

Comme vous pouvez le constater, j'ai essayé une solution avec fadein/fadeout mais qui est moche (on voit le fond entre chaque image...).

Merci pour votre aide !

[lysandro]

Bonjour,

En attendant mieux, une proposition 'à la main', i.e. sans jQuery :
- dans un container en 'position:relative', deux images en 'position :absolute' (donc deux images l'une sur l'autre)
- lors du démarrage du fading, la première image (le z-index le plus bas donc) reçoit l'url de la deuxième image, avec une 'opacity:1', la deuxième image reçoit l'url de l'image a afficher avec une 'opacity:0', la fonction de fading fait varier l'opacité des deux images de façon à ce qu'à la fin, la première image termine avec 'opacity:0' et la deuxième avec 'opacity:1'.

Tu devrais avoir un fondu d'une image sur l'autre.

CSS Image Opacity / Transparency : http://www.w3schools.com/css/css_image_transparency.asp

[vandenn3]

Salut,

Je suis d'accord avec la proposition de lysandro, Il faudrait utiliser 2 conteneurs. Ainsi, on ne voit jamais le fond. Un exemple en jquery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<div id="container">
    <img id='image2' />
    <img id="image1"/><!-- la 2ème image se met automatiquement au dessus de la première :) -->
</div>
<script src='jquery.js'></script>
<script>
var num = 1;
var intervalle = setInterval(function(){
        num++;
        if(num==5) num=1;
	$("img#image2").css("background-image", "url(img/bgBandeau" + num + ".jpg)");//background de l'image derrière
  	$("img#image1").fadeOut(1200, function(){
  		$(this)
  			.css("background-image", "url(img/bgBandeau" + num + ".jpg)") //quand la transition est terminée, on remet les images à l'état initial
  			.fadeIn(0);
  	});
}, 5000);
</script>

[NoSmoking]

Bonjour,
il existe Galerie avec effet de fondu.

[francoisclb]

Merci beaucoup pour vos réponses !