ajouter fonction fondu d'image

8 décembre 2009 à 12:58:00

bonjour à tous,

j'ai un script d'appel d'images pour un simple défilement. C'est ce que je souhaite, mais je trouve çà un peu fade et souhaiterai ajouter un effet de transition genre un fondu ou autre.

var imgs=new Array();
imgs[0]="photos/01.jpg";
imgs[1]="photos/02.jpg";
imgs[2]="photos/03.jpg";
imgs[3]="photos/04.jpg";
imgs[4]="photos/05.jpg";
imgs[5]="photos/06.jpg";
var cpt=0;
function changeimages()
{
	document.getElementById("ima").src=imgs[cpt];
	cpt++;
	if(cpt>=imgs.length) cpt=0;
	setTimeout("changeimages()",2500);
}

il est vraiment tout simple mais finalement un peu trop

comment faudrait il procéder ?

skuti

8 décembre 2009 à 16:57:37

Ce bout de code permet de changer l'opacité d'un div donc il faut juste faire un boucle pour pour que sa disparaisse doucement.

function changeOp(id, opacity)
{
        el = document.getElementById(id);
        el.style["filter"] = "alpha(opacity="+opacity+")";
        el.style["-moz-opacity"] = opacity/100;
        el.style["-khtml-opacity"] = opacity/100;
        el.style["opacity"] = opacity/100;
        return true;
}

$2b||!$2b

XaO

8 décembre 2009 à 17:40:03

Avec ce script ca défile tout seul et en plus ca disparait puis réapparait!
chage la valeur de delai pour faire durer la tempo plus ou moin longtemps.

vu que je suis bon je te le donne!

var image = new Array ("image1", "image2", "image3", "image4");
var nom = new Array ("nom_image1", "nom_image2", "nom_image3", "nom_image4");
var imgNum = 0;
var totalImages = image.length-1;

var delai = 0;
var opacity = 1;
var changement = false;
var tempo = '';

var NavName = navigator.appName;
var IE = 'Microsoft Internet Explorer';

function changer(direction)
{
	if (NavName != IE)
	{
		clearTimeout(tempo);
		
		if(changement == false)
		{
			effacement(direction);
		}
	}
	else
	{
		chgImg(direction);
	}
}

function chgImg(direction)
{
	delai = 0;
	if (document.images)
	{
		if(direction == 'precedent')
		{
			imgNum--;
		}
		else if(direction == 'suivant')
		{
			imgNum++;
		}
		else
		{
			imgNum = 0;
		}
		
		if (imgNum > totalImages)
		{
			imgNum = 0;
		}
		if (imgNum < 0)
		{
			imgNum = totalImages;
		}
		document.getElementById('slideshow').src = image[imgNum];
		document.getElementById('nom').innerHTML = nom[imgNum];
		if (NavName != IE)
		{
			apparition();
		}
	}
}

function apparition()
{
	changement = true;
	if(opacity < 1)
	{
		opacity = opacity+0.1;
		document.getElementById('slideshow').style.opacity = opacity;
		document.getElementById('nom').style.opacity = opacity;
		setTimeout("apparition()", 50);
	}
	else
	{
		changement = false;
		temporisation();
	}
}

function effacement(direction)
{
	changement = true;
	if(opacity > 0)
	{
		opacity = opacity-0.1;
		document.getElementById('slideshow').style.opacity = opacity;
		document.getElementById('nom').style.opacity = opacity;
		setTimeout("effacement('"+ direction +"')", 50);
	}
	else
	{
		chgImg(direction)
	}
}

function temporisation()
{
	if(delai < 10)
	{
		delai++;
		tempo = setTimeout("temporisation()", 1000)
	}
	else
	{
		changement = true;
		effacement("suivant")
	}
}

<table id="defilant" border="0" cellpadding="0">
<tr>
<td onclick="changer('precedent')">Précédent</td>
<td><span id="nom"></span></td>
<td onclick="changer('suivant')">Suivant</td>
</tr>
<tr>
<td colspan="3"><img src="image1"  id="slideshow" style="width: 150px;" alt="Flyer"/></td>
</tr>
</table>

pour ce code j'ai fais un ti boycot de IE mais la fonction est aidément ajoutable !!! demande si tu as besoin d'aide!

mouhg-lee

10 décembre 2009 à 16:48:04

Slt à vous et merci de m'aider.

XaO, pour que ton script fonctionne, il faut l'appeller ds la balise <body> ?

XaO

11 décembre 2009 à 10:44:09

Coucou

oui pardon j'ai oublié ce détail

<body onload="chgImg()">

</code>

mouhg-lee

13 décembre 2009 à 11:03:39

ok merci je vais testervos deux suggestion cette aprém