Fondu enchainé dans transition d'image [Résolu]

Messages postés
2
Date d'inscription
lundi 27 février 2006
Dernière intervention
25 juillet 2013
-
Bonjour,
J'ai trouvé et adapté un ptit script qui me permet d'afficher en transition (sans effet) 4 images.
A la 4eme image, mon "diaporama" s'arrête et reste figé sur la derniere. C'est normal...

Ma question : je cherche maintenant, sur base de ce code pouvoir ajouter une transition entre mes images pour que ce soit moins brut ! une simple transition fondu enchainé...

Que puis-je faire pour ca?

Voici mon code :



<html>
<head>

<script type="text/javascript"> 
var Img=new Array; 
Img[0]="01.jpg"; 
Img[1]="02.jpg"; 
Img[2]="03.jpg"; 
Img[3]="04.jpg"; 
var i=0;
 

function change(index) { 
document.getElementById('pic').src=Img[index]; 
i++; 
if (i < Img.length) 
{ 
setTimeout('change(i)',1500); } } 
setTimeout('change(i)',1500);
</script>
</head>
<body>
<img src="01.jpg" id="pic">
</body>
</html>





Un grand merci pour votre aide,







Eric.
Afficher la suite 

Votre réponse

3 réponses

Meilleure réponse
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
2
Merci
bonjour

un script que j'ai dans mon stock

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style>

.transpa0 {
opacity:0;
filter: Alpha (opacity=0);
position:absolute;
left:0;
top:0;
height:50%;
width:50%
}

.transpa100 {
opacity: 1;
filter: Alpha(opacity=100);
position:absolute;
left:0;
top:0;
height:50%;
width:50%
}

</style>

<script>

var _maliste = ['photos/1.jpg', 'photos/2.jpg', 'photos/3.jpg', 'photos/4.jpg' ];
var tbmage=new Array
var fafade={

temps_pause:3000,
opa:100,
tour:1,
elem0:'null',
elem1:'null',
elem2:'null',
gide:1,

precharge:function() {

for (var i = 0; i < _maliste.length; i++) {
tbmage[i] = new Image();
tbmage.src = _maliste[i];
}
},

change_opacity:function(){

if((parseInt(navigator.userAgent.substring(30,31))<=8)){
fafade.opa-=20;
fafade.elem1.style.filter = 'alpha(opacity=' + fafade.opa + ')';
fafade.elem2.style.filter = 'alpha(opacity=' + (100-fafade.opa) + ')';
} 
else{
fafade.opa-=5;
fafade.elem1.style.opacity = fafade.opa/100;
fafade.elem2.style.opacity = (100-fafade.opa)/100;
}
if(fafade.opa<=0){
fafade.opa=100;
fafade.tour++;

if(fafade.tour==_maliste.length){
fafade.tour=0;
}

if(fafade.gide!=1){
fafade.elem1=fafade.elem0.getElementsByTagName('img')[0];
fafade.elem2=fafade.elem0.getElementsByTagName('img')[1];
fafade.gide=1;
}
else{
fafade.elem1=fafade.elem0.getElementsByTagName('img')[1];
fafade.elem2=fafade.elem0.getElementsByTagName('img')[0];
fafade.gide=2;
}

fafade.elem2.src=_maliste[fafade.tour];

setTimeout(fafade.change_opacity,fafade.temps_pause);

return false;
}

setTimeout(fafade.change_opacity,25);
},

init:function(){
fafade.precharge();
fafade.elem0=document.getElementById('gene');
fafade.elem1=fafade.elem0.getElementsByTagName('img')[0];
fafade.elem2=fafade.elem0.getElementsByTagName('img')[1];
setTimeout (fafade.change_opacity,fafade.temps_pause);
}

}


typeof window.addEventListener == 'undefined' ? attachEvent("onload",fafade.init) : addEventListener("load",fafade.init, false);


</script>
</head>
<body>

<div id='gene'> 
<img src="photos/1.jpg" class="transpa100"/>  
<img src="photos/2.jpg" class="transpa0"/>
</div>

</body>
</html>

Dire « Merci » 2

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 105 internautes ce mois-ci

Commenter la réponse de @karamel
Messages postés
4304
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
9 mars 2018
1
Merci
HTML5/CSS3 + JQuery (facultatif)

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Slider</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
body{
  background-color:#444;
}


#slideshow{
  display:block;
  position:absolute;

  padding:4px;
 
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  
  width: 1080px;
  height:720px;
  
  border:8px solid #fff;
  background-color:#fff;
  
  text-align:center;
  
  overflow:hidden;
  
  box-shadow:0 0 8px #000;
  border-radius:4px;  
  transition: 1s width, 1s height;
}

#slideshow img{
  position:absolute;
  display:inline-block;
  float:left;

  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;

  opacity:0;
  transition:2s opacity;
  z-index:0;

  max-width:1080px;
  max-height:720px;
}
#slideshow img:first-child{
  z-index:1;
  opacity:1;
}
</style>
<script>
function changePic(){
  var P = '#slideshow';
  var position=$(P).attr('position');
  var max     =$(P)[0].childElementCount;
  var O = '#ss'+position;
  position++;
  if(position > max){ position = 1; }
  var N = '#ss'+position;
  $(N).css('z-index','1').css('opacity','1');
  $(O).css('z-index','0').css('opacity','0');
  $(P).attr('position', position).height($(N).height()).width($(N).width());  
}

$(document).ready(function(){
  setInterval("changePic();", 5000);
});
</script>
</head>
<body>
<div id="slideshow" position="1">
  <img id="ss1" src="sliderimgs/a.jpg" alt=""/>
  <img id="ss2" src="sliderimgs/b.jpg" alt=""/>
  <img id="ss3" src="sliderimgs/c.jpg" alt=""/>
  <img id="ss4" src="sliderimgs/d.jpg" alt=""/>
  <img id="ss5" src="sliderimgs/e.jpg" alt=""/>
  <img id="ss6" src="sliderimgs/f.jpg" alt=""/>
  <img id="ss7" src="sliderimgs/g.jpg" alt=""/>
  <img id="ss8" src="sliderimgs/h.jpg" alt=""/>
  <img id="ss9" src="sliderimgs/i.jpg" alt=""/>
  <img id="ss10" src="sliderimgs/j.jpg" alt=""/>
</div>
</body>
</html>


Demo -> https://c9.io/deefaze/jq-codes/workspace/index.html

________________________________________________________
[ besoin de câbles audio, vidèo, informatique pas cher ?]
Commenter la réponse de f0xi
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
pas mal le script mais par contre l'effet ne fonctionne pas avec ie 8 sachant que ie 8 c'est environ 23 % d'utilisateur et les image mis a chaud dans la page il faut avoir une bonne connexion

--
f0xi
Messages postés
4304
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
9 mars 2018
-
j'ai fais ça à l'arrache en local avec des images HD > 3000x2000 :) j'avais que ça sous la main.

Bien sur, le but n'etait que de montrer le CSS, pour le pré-load etc je te laisse faire selon ton contenus.

IE8 -> te prend pas la tête a coder pour IE8 -> IF IE<9 -> GO MAJ TON NAVIGATEUR.
IE9 et IE10 sont de plus en plus utilisés, faut arreter de se prendre la tête à supporté des navigateurs qui ne sont plus maintenus et dont le % d'utilisation ne fait que baisser.
BBFUNK01
Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Dernière intervention
20 juin 2014
-
Hello,

Je ne suis pas tout à fait d'accord avec toi foxi :

"IE8 -> te prend pas la tête a coder pour IE8 -> IF IE<9 -> GO MAJ TON NAVIGATEUR."

Toutes les personnes qui sont encore sous Windows XP ne peuvent pas passer à IE9, certes elles peuvent utiliser Firefox, Chrome, ou d'autres navigateurs mais il y a encore beaucoup de personnes qui n'osent pas forcément "changer de crémerie" si je puis dire, à mon avis il faut se farcir le debug sur IE8 pendant quelques temps encore... (malheureusement :( )

A+
f0xi
Messages postés
4304
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
9 mars 2018
-
Windows XP -> plus maintenus.
IE6/IE7/IE8 -> plus maintenus (ou si peu pour IE8)

pourquoi s'embeter avec ces choses, chez nous y'a pas le budget pour faire des sites moderne next-gen et une version préhistorique.
gain de temps, gain d'argent sur tout les plans.
Commenter la réponse de @karamel

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.