défilement d'image par tableau c'est a dire que ce sont des image qui défiles grâce a l'ajout et la suppression d'une cellule du tableau dans lequel sont inséré les images et ce dynamiquement la reference aux images se trouvant dans un tableau javascript ça évite d'insere directement toute les image des le chargement de la page et le nombre d'image est illimité.
il y a trois script
le premier fait défiler les image
le seconde est contrôlé par des touches
le troisième ajoute un lien a chaque image
Source / Exemple :
<!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">
<body>
<script language="JavaScript">
var temp=600
var nbr_de_cellule=6
var xx=nbr_de_cellule-1
var suivi=0
tbimage=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06","d8","d8_02","d8_03","d8_04","d8_05","d8_06","d10","d10_02","d10_03","d10_04","d10_05","d10_06","d1","d1_02","d1_03","d1_04","d1_05","d1_06","d2","d2_02","d2_03","d2_04","d2_05","d2_06","d3","d4","d4_02","d4_03","d4_04","d4_05","d4_06","d5","d5_02","d5_03","d5_04","d5_05","d5_06","d6","d6_02","d6_03","d6_04","d6_05","d6_06")
tblien=new Array("d7","d7_02","d7_03","d7_04","d7_05","d7_06","d8","d8_02","d8_03","d8_04","d8_05","d8_06","d10","d10_02","d10_03","d10_04","d10_05","d10_06","d1","d1_02","d1_03","d1_04","d1_05","d1_06","d2","d2_02","d2_03","d2_04","d2_05","d2_06","d3","d4","d4_02","d4_03","d4_04","d4_05","d4_06","d5","d5_02","d5_03","d5_04","d5_05","d5_06","d6","d6_02","d6_03","d6_04","d6_05","d6_06")
function function1() {
if(xx>=tbimage.length-1){
xx=xx-tbimage.length
}
xx++
document.getElementById("ntab").rows[0].insertCell(nbr_de_cellule)
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].appendChild(document.createElement('a')).href='images/'+tblien[xx]+'.jpg';
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.appendChild(document.createElement('img'));
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.lastChild.style.height=150+"px"
document.getElementById("ntab").rows[0].cells[nbr_de_cellule].lastChild.lastChild.src='images/'+tbimage[xx]+'.jpg'
document.getElementById("ntab").rows[0].deleteCell(0)
}
function function2() {
if(xx<=0){
xx=tbimage.length+(xx)
}
xx--
document.getElementById("ntab").rows[0].insertCell(0)
document.getElementById("ntab").rows[0].cells[0].appendChild(document.createElement('a')).href='images/'+tblien[xx]+'.jpg';
document.getElementById("ntab").rows[0].cells[0].lastChild.appendChild(document.createElement('img'));
document.getElementById("ntab").rows[0].cells[0].lastChild.lastChild.style.height=150+"px"
document.getElementById("ntab").rows[0].cells[0].lastChild.lastChild.src='images/'+tbimage[xx]+'.jpg'
document.getElementById("ntab").rows[0].deleteCell(nbr_de_cellule)
}
function aller() {
if(suivi==0){
suivi=1
bozo=setInterval('function1()',temp)
}
else{
clearInterval(bozo)
suivi=0
}
}
function retour() {
if(suivi==0){
xx=xx-(nbr_de_cellule-1)
suivi=1
bozo=setInterval('function2()',temp)
}
else{
clearInterval(bozo)
xx=xx+(nbr_de_cellule-1)
suivi=0
}
}
</script>
<div align='center'>
<table id="ntab" border='no' rules='none'>
<tr id='fg'>
<td> <a href='images/d7.jpg'> <img src='images/d7.jpg' height=150></a> </td>
<td> <a href='images/d7_02.jpg'> <img src='images/d7_02.jpg' height=150> </a> </td>
<td> <a href='images/d7_03.jpg'> <img src='images/d7_03.jpg' height=150> </a> </td>
<td> <a href='images/d7_04.jpg'> <img src='images/d7_04.jpg' height=150> </a> </td>
<td> <a href='images/d7_05.jpg'> <img src='images/d7_05.jpg' height=150> </a> </td>
<td> <a href='images/d7_06.jpg'> <img src='images/d7_06.jpg' height=150> </a> </td>
</tr>
</table>
<div align='center'>
<img src='retour2.jpg' onmouseover='aller();this.src="retour.jpg"' onmouseout='aller();this.src="retour2.jpg"'>
<img src='aller2.jpg' onmouseover='retour();this.src="aller.jpg"' onmouseout='retour();this.src="aller2.jpg"'>
</div>
</div>
</body>
</html>
Conclusion :
si on choisi des image pas trop lourde on peut eviter de precharger les image on peut meme mettre un div overflow en amont afin de laisser l'image se charger avant d'etre vu evitant ainsi le prechargement
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.