Fondu enchainer entre plusieurs images

Soyez le premier à donner votre avis sur cette source.

Vue 52 249 fois - Téléchargée 5 126 fois

Télécharger le projet

Commenter

Description

Ce code JS vous permettra de faire défiler plusieurs images contenu dans un répertoire les une après les autres via un fondu.
- Il est compatible IE et Mozilla
- Fonctionne avec GIF, JPEG, PNG
- Entièrement paramètrable (fluidité, temps de pause, nombres d'images, ...)
- Très simple a mettre en oeuvre

Démo visible ici : http://www.coopmcs.com/demo/fondu/fondu.html

Source / Exemple :

<HTML>
<HEAD>
<TITLE>Fondu de plusieurs images</TITLE>

<!-- On déclare le code source -->
<SCRIPT LANGUAGE="JavaScript">
<!--

// mettre un minimum de 4 images !!!

var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'gfx/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images

// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null ;
var sens = 1;
var tabImg;  // tab contenant les images

function prechargerImg(){
  tabImg = new Array(nombre_image);
  for (i=0; i<=nombre_image -1; i++){
	tabImg[i]=new Image();
	tabImg[i].src = prefix_image+(i+1)+suffix_image;
  }
}

function init()
{
	img1 = document.getElementById("defilement1") ;
	img2 = document.getElementById("defilement2") ;

	prechargerImg();
	change_opacity();
}

function change_opacity()
{	
	var opacity1 = 0 ;
	var opacity2 = 0 ;
	if (isIE)  // for IE
	{	opacity1 = parseFloat(img1.filters.alpha.opacity);
		opacity2 = parseFloat(img2.filters.alpha.opacity);
	}
	else       // for mozilla
	{	opacity1 = parseFloat(img1.style.MozOpacity);
		opacity2 = parseFloat(img2.style.MozOpacity);
	}

	if (sens)
	{	if (isIE)  // for IE
		{	img1.filters.alpha.opacity = opacity1 + coef * 100;
			img2.filters.alpha.opacity = opacity2 - coef * 100;
		}
		else // for Mozilla
		{	img1.style.MozOpacity = opacity1 + coef;
			img2.style.MozOpacity = opacity2 - coef;
		}
	}
	else
	{
		if (isIE)  // for IE
		{	img1.filters.alpha.opacity = opacity1 - coef * 100;
			img2.filters.alpha.opacity = opacity2 + coef * 100;
		}
		else // for Mozilla
		{	img1.style.MozOpacity = opacity1 - coef;
			img2.style.MozOpacity = opacity2 + coef;
		}
	}

	if (isIE)  // for IE
	{	opacity1 = parseFloat(img1.filters.alpha.opacity);
		opacity2 = parseFloat(img2.filters.alpha.opacity);
	}
	else       // for mozilla
	{	opacity1 = parseFloat(img1.style.MozOpacity);
		opacity2 = parseFloat(img2.style.MozOpacity);
	}

	// on fait varié le sens d'opacité du bazar
	if (opacity2  <= 0)
	{	img2.src=tabImg[indice++].src;
		sens = 0;
		if (indice == (tabImg.length)) indice=0;
		window.setTimeout("change_opacity()",temps_pause) ; // attente
		return 0;
	}
	else if (opacity1 <= 0)
	{	img1.src=tabImg[indice++].src;
		sens = 1;
		if (indice == (tabImg.length)) indice=0;
		window.setTimeout("change_opacity()",temps_pause) ; // attente
		return 0;
	}
	window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
}
-->
</SCRIPT>
</HEAD>

<!-- On charge le script et les images -->
<BODY onload="init();">

<!-- Premiere image id=defilement1 -->
<img id="defilement1" src="gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">

<!-- Deuxieme image id=defilement2    /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ -->
<img id="defilement2" src="gfx/2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-10px;left:-174px;">

</BODY>
</HTML>

Télécharger le projet

Codes Sources

A voir également

Fondu enchainer entre plusieurs images
C# compare images ✓ - Forum C# / .NET
Faire défiler des images en boucle html ✓ - Forum Javascript / DHTML
Images defilantes en boucle - Forum PHP
Faire défiler liste images ou vidéos dans un menu style IPOD en javascript???? - Forum Javascript / DHTML
Ttttyyyy images - Forum PHP

Ajouter un commentaire Commentaires

stef1589 Messages postés 44 Date d'inscription dimanche 19 mars 2006 Statut Membre Dernière intervention 27 mars 2008
1 août 2006 à 10:15

merci c est ce que je cherchais. mais pourquoi faut mettre au moins 4 images ? ca pourrait pas marcher avec moins ?

ryosama Messages postés 35 Date d'inscription jeudi 19 février 2004 Statut Membre Dernière intervention 2 février 2009
1 août 2006 à 10:51

J'ai mis 4 images minimum car il y a un effet de bords lorsque l'on en met moins. Au premier passage les images ne "tournent" pas dans le bon sens, ca redevient ensuite normal. Avec 4 c'est nikel. C'est pas très grave mais je n'avais pas le courage de changer ça. Le site pour lequel j'ai developpé ce bout de code avait 5 images.

cs_jjdagadir Messages postés 127 Date d'inscription lundi 7 avril 2003 Statut Membre Dernière intervention 6 mars 2009
1 août 2006 à 22:34

C'est propre, simple et çà marche bien, merci et bravo
Kenavo

meluesine Messages postés 6 Date d'inscription samedi 20 avril 2013 Statut Membre Dernière intervention 20 avril 2013
2 déc. 2009 à 12:08

Bonjour,

En utilisant l'astuce de Tina13, j'arrivais à un bon résultat sur FF mais pas sur IE6, du coup j'ai combiné avec un float:right; affecté aux deux images et chez moi ça a l'air de marcher mais j'ai pas testé avec tous les navigateurs.

moughlee Messages postés 7 Date d'inscription mardi 16 juin 2009 Statut Membre Dernière intervention 20 janvier 2010
8 déc. 2009 à 11:05

slt à tous et merci pour le scrip.
Malheureusement je n'arrive pas à le faire le faire fonctionner. il n'ya pas de défilement:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Desmotscrasseux</title>
<link rel="stylesheet" type="text/css" href="design/design.css" />

<script LANGUAGE="JavaScript">// mettre un minimum de 4 images !!!

var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'gfx/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images

// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null ;
var sens = 1;
var tabImg; // tab contenant les images

function prechargerImg(){
tabImg = new Array(nombre_image);
for (i=0; i<=nombre_image -1; i++){
tabImg[i]=new Image();
tabImg[i].src = prefix_image+(i+1)+suffix_image;
}
}

function init()
{
img1 = document.getElementById("defilement1") ;
img2 = document.getElementById("defilement2") ;

prechargerImg();
change_opacity();
}

function change_opacity()
{
var opacity1 = 0 ;
var opacity2 = 0 ;
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}

if (sens)
{ if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 + coef * 100;
img2.filters.alpha.opacity = opacity2 - coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 + coef;
img2.style.MozOpacity = opacity2 - coef;
}
}
else
{
if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 - coef * 100;
img2.filters.alpha.opacity = opacity2 + coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 - coef;
img2.style.MozOpacity = opacity2 + coef;
}
}

if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}

// on fait varié le sens d'opacité du bazar
if (opacity2 <= 0)
{ img2.src=tabImg[indice++].src;
sens = 0;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
else if (opacity1 <= 0)
{ img1.src=tabImg[indice++].src;
sens = 1;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
//window.status = "opa1 : " + img1.style.MozOpacity + " opa2 : " + img2.style.MozOpacity + " indice : "+indice;
window.setTimeout("change_opacity()",temps) ; // recursion toutes les 30 millisec
}
</script>

</head>





et le CSS

.news_image
{
float: right;
margin-top: 40px;
width: 320px;
height: 230px;
background-color: none;
border-bottom: 2px dashed grey;

}

voila ce que çà donne :
http://www.desmotscrasseux.lautre.net/

merci de m'aider a+

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Fondu enchainer entre plusieurs images

Description

Source / Exemple :

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (ryosama)

Contrainte de saisie sur champs input

Librairie de gestion des couleurs pour css : colorparser

Plugin jquery : progress bar

Auto completion sur champs texte

Source / Exemple :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (ryosama)

Contrainte de saisie sur champs input

Librairie de gestion des couleurs pour css : colorparser

Plugin jquery : progress bar

Auto completion sur champs texte

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !