Defilement d'image par tableau

Soyez le premier à donner votre avis sur cette source.

Vue 22 057 fois - Téléchargée 2 164 fois

Description

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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
vendredi 30 janvier 2009
Statut
Membre
Dernière intervention
3 mars 2009

je suis débutant en javascript et j'en cherchais un simple pour mettre dans site perso.
Après quelques tatonnements j'ai réglé la vitesse de passage. J'ai utilisé ce script sous deux formes avec six cases et avec une seule case.L'un avec lien pour agrandir l'image, l'autre sans lien.
Un problème reste à résoudre : Lorsque je reviens au diaporama après avoir demandé d'agrandir l'image ,les images affichées sont celles du début du diaporama et non celles que j'étais en train de regarder. Il y aurait-il un moyen de garder les références de l'image agrandie et continuer le diaporama et non le reprendre à 0. Peut-on paramètrer l'affichage des 6 cases en fin de script? Merci de votre réponse.
Bravo encore pour le script Fondu enchainé. Je vais l'utiliser pour un affichage automatique de séries d'images.
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
Sans épiloguer et pour faire court , amélioration a faire :

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")

a remplacer par un getElementsByTagName('img') sur le contenant de tes images, ce qui évite a l'utilisateur de devoir se farcir a la mimine toutes les images

ensuite :

document.getElementById("ntab").rows[0] , pourquoi ne pas stocker dans une variable ??? gain de place et de poid de la source

et le point le plus critique pourquoi utiliser un tableau pour la mise en forme ??
une liste aurait été plus approprié ...

à titre d'exemple , une vielle source : http://easynews.free.fr/mbox/
Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
134
j'accepte tout a fait les critique mais la dernière phrase je ne la comprend pas. et en plus tu ne donne pas l'impression de t'etre penche sur la source
mon avis au sujet de tous ca.

il faut tourner sa langue 7 fois avant de parler.

http://fr.answers.yahoo.com/question/index?qid=20070120113707AAPglOx
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
L'idée ? elle a été reprise X fois , celle ci n'est comme tu le souligne pas générique et pas très adaptable ...
ha si je suis mauvaise langue => ré écrire le code ;-)

Kazma , mon premier commentaire était constructif , dans le sens ou je met en avant tes erreurs, tu aurais pu demander conseil plutôt qu'une réflexion vaine ^^

On apprend plus de ses erreurs que de solution trouvé par chance enfin moi ce que j'en dis ...
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015

2 remarques
- Ça manque de commentaires
- ça mériterait d'être plus générique, c'est à dire notamment d'utiliser des boucles par exemple.
En tout cas pour moi c'est un grand intéret ne serait ce que pour l'idée
Afficher les 8 commentaires

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.