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

shakiboy 2 Messages postés lundi 27 février 2006Date d'inscription 25 juillet 2013 Dernière intervention - 25 juil. 2013 à 12:21 - Dernière réponse : f0xi 4304 Messages postés samedi 16 octobre 2004Date d'inscriptionModérateurStatut 9 mars 2018 Dernière intervention
- 5 août 2013 à 22:55
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 

6 réponses

Répondre au sujet
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 25 juil. 2013 à 17:53
+1
Utile
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>
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de @karamel
f0xi 4304 Messages postés samedi 16 octobre 2004Date d'inscriptionModérateurStatut 9 mars 2018 Dernière intervention - Modifié par f0xi le 4/08/2013 à 03:24
+1
Utile
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 ?]
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de f0xi
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 4 août 2013 à 10:57
0
Utile
3
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 4304 Messages postés samedi 16 octobre 2004Date d'inscriptionModérateurStatut 9 mars 2018 Dernière intervention - 5 août 2013 à 13:40
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 1313 Messages postés jeudi 16 juillet 2009Date d'inscription 20 juin 2014 Dernière intervention - 5 août 2013 à 17:15
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 4304 Messages postés samedi 16 octobre 2004Date d'inscriptionModérateurStatut 9 mars 2018 Dernière intervention - 5 août 2013 à 22:55
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.