Diapos multiples

Télécharger le projet
Commenter

Description

petit script pour mettre plusieurs diapo sur une page simple a mettre en œuvre

Source / Exemple : 

<!DOCTYPE html>
<html xmlns="[http://www.w3.org/1999/xhtml]">
<head>


<style type="text/css">

body{
background: black
}

img{
width:12%;
}
</style>



<script type="text/javascript">


function Diaporama( tb,repertoire, tps ){

 this.Tableau=tb;
 this.temp=tps;
 this.repertoir_image=repertoire;
 this.tbmage=-1;
 this.timer='';
 
 this.creation();
}

Diaporama.prototype.diap = function(){

 this.tbmage++;
 this.Image.src=this.repertoir_image+this.Tableau[this.tbmage]+'.jpg';
 if(this.tbmage==this.Tableau.length-1){
  this.tbmage=-1;
 }
 var lui=this;
 this.timer=setTimeout( function() { lui.diap(); }, this.temp );
}


Diaporama.prototype.creation = function(){

 this.Image=document.createElement('img');
 this.Image.src=this.repertoir_image+this.Tableau[0]+'.jpg';
 document.getElementById('conteneur').appendChild(this.Image);
 
 var lui=this;
 
 this.Image.onmouseout=function(){lui.diap()};
 this.Image.onmouseover=function(){clearTimeout(lui.timer)};
 
 this.diap();
}

function inimage(){

 var tbimagea=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06");
 var tbimageb=new Array("d8","d8_02","d8_03","d8_04","d8_05","d8_06");
 var tbimagec=new Array("d10","d10_02","d10_03","d10_04","d10_05","d10_06");
 var tbimaged=new Array("d1","d1_02","d1_03","d1_04","d1_05","d1_06");
 var tbimagee=new Array("d2","d2_02","d2_03","d2_04","d2_05","d2_06");
 var tbimagef=new Array("d3","d3_02","d3_03","d3_04","d3_05","d3_06");
 var tbimageg=new Array("d4","d4_02","d4_03","d4_04","d4_05","d4_06");
 var tbimageh=new Array("d5","d5_02","d5_03","d5_04","d5_05","d5_06");
 var tbimagei=new Array("d6","d6_02","d6_03","d6_04","d6_05","d6_06");
 var tbimagej=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06");
 var tbimagek=new Array("d8","d8_02","d8_03","d8_04","d8_05","d8_06");
 var tbimagel=new Array("d9","d9_02","d9_03","d9_04","d9_05","d9_06");
 var tbimagem=new Array("d3","d3_02","d3_03","d3_04","d3_05","d3_06");
 var tbimagen=new Array("d2","d2_02","d2_03","d2_04","d2_05","d2_06");
 var tbimageo=new Array("d6","d6_02","d6_03","d6_04","d6_05","d6_06");
 var tbimagep=new Array("d4","d4_02","d4_03","d4_04","d4_05","d4_06");
 var tbimageq=new Array("d10","d10_02","d10_03","d10_04","d10_05","d10_06");
 var tbimager=new Array("d1","d1_02","d1_03","d1_04","d1_05","d1_06");

 new Diaporama(tbimagea,'images/',600);
 new Diaporama(tbimageb,'images/',400);
 new Diaporama(tbimagec,'images/',300);
 new Diaporama(tbimaged,'images/',500);
 new Diaporama(tbimagee,'images/',800);
 new Diaporama(tbimagef,'images/',300);
 new Diaporama(tbimageg,'images/',300);
 new Diaporama(tbimageh,'images/',800);
 new Diaporama(tbimagei,'images/',300);
 new Diaporama(tbimagej,'images/',500);
 new Diaporama(tbimagek,'images/',800);
 new Diaporama(tbimagel,'images/',300);
 new Diaporama(tbimagem,'images/',500);
 new Diaporama(tbimagen,'images/',700);
 new Diaporama(tbimageo,'images/',300);
 new Diaporama(tbimagep,'images/',500);
 new Diaporama(tbimageq,'images/',900);
 new Diaporama(tbimager,'images/',300);
 new Diaporama(tbimagea,'images/',500);
 new Diaporama(tbimageb,'images/',200);
 new Diaporama(tbimagec,'images/',300);
 new Diaporama(tbimaged,'images/',500);
 new Diaporama(tbimagee,'images/',800);
 new Diaporama(tbimagef,'images/',300);
 new Diaporama(tbimageg,'images/',500);
 new Diaporama(tbimageh,'images/',800);
 new Diaporama(tbimagef,'images/',200);
 new Diaporama(tbimageg,'images/',700);
 new Diaporama(tbimageh,'images/',500);
 new Diaporama(tbimagei,'images/',300);
 new Diaporama(tbimagej,'images/',500);
 new Diaporama(tbimagek,'images/',900);

}

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

</script>
</head>
<body style='background:black'>
<div style='width:90%;margin:auto' id='conteneur'>

</div>

</body>
</html>

Conclusion :

apparemment sa marche
Télécharger le projet

Codes Sources

A voir également

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.

Du même auteur (@karamel)