begin process at 2012 05 28 13:22:16
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > DEFILEMENT D'IMAGE PAR TABLEAU

DEFILEMENT D'IMAGE PAR TABLEAU


 Information sur la source

Note :
4 / 10 - par 2 personnes
4,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :defilement, diaporama, diapo, image, image defile Niveau :Débutant Date de création :08/02/2009 Date de mise à jour :10/02/2009 15:39:36 Vu / téléchargé :15 246 / 1 536
Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <!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>
<!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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

10 février 2009 15:39:39 :
ajout de commantaires

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Toutes les sources de kazma

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec Zip Source avec une capture CENTRAGE D'IMAGE AVEC PETIT EFFET par kazma
Source avec Zip Source avec une capture LIGHTBOX DIAPORAMA par kazma
Source avec Zip Source avec une capture DEFILEMENT A LA IPHONE par kazma
DIAPORAMA par tit1012

Commentaires et avis

Commentaire de mickaelpfr le 09/02/2009 16:32:36 1/10

Code assez lourd et sans grand intérêt ...

il y a trois script ?? <= on appel ça des méthodes

le seconde est controle par des touches ??? quel touche je ne vois aucun listener d'évènement pour gèrer le script avec les touches ....

le troisieme ajoute un lien a chaque image <= pourquoi faire ?

Javascriptfr est un site de partage de source mais il serait bien de faire un tri ...

Commentaire de kazma le 09/02/2009 19:47:36 administrateur CS

a commence par toi

Commentaire de JJDai le 09/02/2009 22:01:14

hola que de haine.
Perso je trouve l'idée intéressante, je vais jeté un oeil sur le code pour voir comment l'intégrer dans un module que j'ai fais pour xoops.

Commentaire de JJDai le 09/02/2009 22:56:46

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

Commentaire de mickaelpfr le 10/02/2009 10:50:44

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 ...

Commentaire de kazma le 10/02/2009 11:47:23 administrateur CS

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

Commentaire de mickaelpfr le 10/02/2009 11:53:47

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/

Commentaire de nature368 le 03/03/2009 23:46:08 7/10

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.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Defilement d image [ par RAPHAI ] Bonjour a tous,J aimerais faire defiler des images a l aide de curseurs. Le probleme est que je n ai aucune idee de comment faire!Je dois les faire de defilement d'image [ par spiesalex ] bonjour j'aimerai avoir&nbsp; un script qui permettrai de d&#233;filer des image&nbsp; a la vertical de bas en haut . le seul hic c'est que je ne sais diaporama en html [ par CPoPo ] Bonjour, je cherche à créer un diaporama : quand on clic sur "image suivante", une nouvelle image se télécharge. Mias je ne trouve pas le code html à Problème avec les caractères spéciaux ! [ par Ruffneck2045 ] Bonjour, j'ai cr&#233;er un diaporama &#224; l'aide&nbsp;de php &amp; javascript et j'ai un petit probl&#232;me.En cliquant sur une image du diaporama nombre d'image pour diaporama [ par bosto ] Bonjour,Je suis super d&#233;butant et surtout graphiste pas technicien. Ma question est peut etre tres simple mais je ne trouve pas de reponse sur le Bloquer un setTimeout [ par ov3rdoze ] Salut à tousJ'essaye de faire une galerie photo avec un diaporama. Tout fonctionne mais j'ai un problème dans un cas particulier : Si on arrete le dia probléme diapo [ par anass12345 ] bonsoir, j'essaie de faire une diapo d'image javascript qui défile une image chaque 5sec, avec deux boutons suivant et précédent,pour permettre le cha diaporama [ par ecriT ] Bonjour,je dispose d'un diaporama sur mon site,  je copie la source du diapo pour en avoir un autre sur la meme page, mais les boutons pilotent tjrs l diaporama automatique avec liens sur chaque image [ par ju1385 ] Bonjour, j'ai ici un script simple de diaporama d'image que j'ai récupéré et qui marche bien. Cependant, je voudrais y modifier/ajouter 2 choses (je n Trouver les dimensions réelles d'une image [ par ov3rdoze ] BonjourJe suis en train de développer une galerie d'images. Quand on clique sur une image, celle-ci s'ouvre dans un cadre. Il y a un bouton "Image sui


Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Underwater
Photo Renewable Energy is Within Reach 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,856 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)