begin process at 2012 02 11 02:44:14
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Navigation

 > IMAGE DÉFILANTE (LE PLUS SIMPLE POSSIBLE)

IMAGE DÉFILANTE (LE PLUS SIMPLE POSSIBLE)


 Information sur la source

Note :
7,33 / 10 - par 3 personnes
7,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Navigation Classé sous :défiler, image, défilante, tableau Niveau :Débutant Date de création :19/01/2006 Vu / téléchargé :45 806 / 3 615
Auteur : nicompx

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

 Description

Ce code source permet de faire défiler des images grâce à des boutons.

Bouton :
Début
Fin
Suivante
Précédente

Source

  • <HTML>
  • <head>
  • <title> Images défilante </title>
  • <SCRIPT LANGUAGE="JavaScript">
  • var compteur = 1
  • var nbr_image = 4
  • function decremente(arg)
  • {
  • if (compteur == 0)
  • {
  • compteur = nbr_image
  • }
  • document.images[0].src = "img"+compteur+".jpg"
  • compteur --
  • }
  • function incremente(arg)
  • {
  • compteur ++
  • if (compteur == (nbr_image+1))
  • {
  • compteur = 1
  • }
  • document.images[0].src = "img"+compteur+".jpg"
  • }
  • function fin(arg)
  • {
  • compteur = nbr_image
  • document.images[0].src = "img"+compteur+".jpg"
  • }
  • function debut(arg)
  • {
  • compteur = 1
  • document.images[0].src = "img"+compteur+".jpg"
  • }
  • </SCRIPT>
  • </head>
  • <BODY bgColor=#800000>
  • <FORM>
  • <center><br><br><br>
  • <table border="3" cellpadding="3" cellspacing="3" bordercolor="#11111111" bgColor="#DBDBDB">
  • <tr>
  • <td align="center">
  • <img src="img1.jpg" border="0">
  • </td>
  • </tr>
  • </table>
  • <br><br>
  • <input type="button" value="Image précédente" onclick="decremente(this.arg)">
  • <input type="button" value="Image suivante" onclick="incremente(this.arg)">
  • <input type="button" value="Première Image" onclick="debut(this.arg)">
  • <input type="button" value="Dernière Image" onclick="fin(this.arg)">
  • </center>
  • </FORM>
  • </BODY>
  • </HTML>
<HTML>
   <head>
      <title> Images défilante </title>

<SCRIPT LANGUAGE="JavaScript">

var compteur = 1        
var nbr_image = 4



function decremente(arg)                               
{
 
if (compteur == 0) 					
	{
	compteur = nbr_image				
	}

document.images[0].src = "img"+compteur+".jpg"	

compteur --	
}




function incremente(arg) 
{
compteur ++
						
	if (compteur == (nbr_image+1)) 			
	{
	compteur = 1
	}

document.images[0].src = "img"+compteur+".jpg"
}




function fin(arg)
{
	compteur = nbr_image
	document.images[0].src = "img"+compteur+".jpg"
}



function debut(arg)
{
	compteur = 1
	document.images[0].src = "img"+compteur+".jpg"
}


  </SCRIPT>
</head>



 

<BODY bgColor=#800000>
  <FORM>
    <center><br><br><br>
      <table border="3" cellpadding="3" cellspacing="3" bordercolor="#11111111" bgColor="#DBDBDB">  
        <tr>
          <td align="center">

		<img src="img1.jpg" border="0">
          </td>
        </tr>
      </table>


<br><br>
<input type="button" value="Image précédente" onclick="decremente(this.arg)">                

<input type="button" value="Image suivante" onclick="incremente(this.arg)">

<input type="button" value="Première Image" onclick="debut(this.arg)">

<input type="button" value="Dernière Image" onclick="fin(this.arg)">


    </center>
  </FORM>
</BODY>
</HTML>


 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


 Sources de la même categorie

Source avec Zip Source avec une capture ANTI-ROBOTS V 1.0 par MacGaliver
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip Source avec une capture NAVIGATEUR INTERNET HAVRET par HAVRETos
Source avec Zip WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator
Source avec Zip Source avec une capture NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh
Toutes les sources de la catégorie Navigation

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANTES EN JAVASCRIPT (SCROLLING IMAGES) par william voirol
IMAGES DANS UN TABLEAU AUTOMATIQUE par adelvian
Source avec Zip IMAGE DÉFILANTE par kheprys

Commentaires et avis

Commentaire de PetoleTeam le 19/01/2006 13:50:50


Bonjour

Il serait plus élégant de travailler avec
<img NAME="PHOTO" src="img1.jpg" border="0">
pour appeler
  document.images['PHOT0'].src
et non
  document.images[0].src
d'autre part tu passes en paramètre aux fonction ( arg) qui n'est pas utilisé...dommage

et enfin toujours dans l'élégance une fonction du type ShowImage()
globale appelée de la sorte ShowImage( +1) ou ( -1) et pour le débute et la fin ShowIMage( document.images.length) et (0) pour le début....

C'est quand même bien, on a tous débuté  

Commentaire de vincenzo51 le 13/08/2007 19:47:37

Bonjour,

Nicompx est peut être un débutant, mais il a un meilleur niveau que moi "Oh Humilité quand tu nous tiens!!"
Alors ces judicieux conseils PetoleTeam sont sûrement très bien, mais je ne les comprends pas… Serait il possible d’avoir le code amélioré complet svp ? Je cherche à faire ça partout sur le net, et je m’apprête à utiliser ce code.

Merci pour les éclaircissements !

Vincenzo

Commentaire de PetoleTeam le 20/08/2007 19:16:32

Bonjour,
Je pensais que nicompx avait modifier sa source.
Je t'en livre une exemple parmis tant d'autres sur base de la source ci dessus...
//--------------------------------------------------------------------------
<html>
<head>
<title> Images défilante </title>
<script type="text/javascript">
var Num_Image = 1
var Max_Image = 4
//-----------------------
function ShowImage( inc_){
  //-- Recup de l'objet
  var O_Img = document.images['PHOTO'];
  //-- Gestion des Bornes
  Num_Image += inc_;
  if( Num_Image < 1) Num_Image  = Max_Image;
  if( Num_Image > Max_Image) Num_Image = 1;
  //-- Affichage Image
  O_Img.src  = "img" + Num_Image +".jpg"
}
</script>
</head>
<body bgcolor=#800000>
<center><br><br><br>
<table border="3" cellpadding="3" cellspacing="3" bordercolor="#11111111" bgcolor="#DBDBDB">
<tr>
<td align="center">
<img name="PHOTO" src="img1.jpg" border="0">
</td>
</tr>
</table>
<br><br>
<input type="button" value="Image précédente" onclick="ShowImage(-1);">
<input type="button" value="Image suivante"   onclick="ShowImage(+1);">
<input type="button" value="Première Image"   onclick="Num_Image = 1; ShowImage(0);">
<input type="button" value="Dernière Image"   onclick="Num_Image =Max_Image;ShowImage(0);">
</center>
</body>
</html>
//--------------------------------------------------------------------------

;0)

Commentaire de vincenzo51 le 22/08/2007 16:19:35

Super! Merci PetoleTeam!

Vincenzo

Commentaire de Pedrosa le 04/10/2007 12:39:46

Merci pour ton code qui marche bien. Mais on pourrait améliorer tout ça.
Par exemple em adicionnant le défilement régulier à un intervalle de temps précis.

Bonne continuation.

Commentaire de JacarandaRom1 le 23/10/2007 11:33:55

Bonjour a tous!
J'aimerai mettre en place ce script pour faire défiler des images qui sont contenues dans une base de données!
Est ce possible? Et si Oui , à quoi pourrai ressembler le code ?!
Merci d'avance!

Commentaire de pygo le 13/05/2008 12:12:19

salut a tous,

je viens d'installer ce code mais mes images s'affichent l'une en dessous de l'autre.comment faire pour les afficher une par une en utilisant les boutons?

merci beaucoup

Commentaire de LSDY le 28/08/2008 14:47:42

Salut,
pas mal du tout, mais quand on en met plusieurs fois le script sur la page (pour faire différents "diaporamas"/défilements d´images) ça ne marche pas : je clique sur le bouton du 1er diaporama, et ça change l´image dans le 2°...

Vu que je ne taquine pas vraiment le js, ce serait cool que quelqu'un m´explique comment faire.

Commentaire de mimiZanzan le 04/09/2008 15:54:04

Salut,
Je voudrais pouvoir afficher sous les images un commmentaire spécifique à chaque image, qui défilerait donc en même temps que les images.
Comment faire SVP?
Je suis débutant en Java script.
Merci d'avance

Commentaire de sommaille le 04/02/2011 19:42:02

bonjour, je ne comprend pas ce code ^^' en faite je fais défile des images de mon pc au pif, comment mettre mes photos (47) nommé (1 a 47.jpg)


Merci à vous pour vos reponses

Commentaire de sartoz le 21/02/2011 20:11:37 10/10

ca marche

Commentaire de issanissa83 le 29/09/2011 09:38:10

Bonjour à tous,
Ce script est vraiment très intéressant mais peut on mettre un lien pour chaque image.
Merci pour votre réponse

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Aïe Problème Visu d'Image [ par esdtechnologie ] Bonjour à toutes et à tous.Voilà j'ai un problème, je crée un tableau en dynamique à partir d'une requête SQL.La première colonne de mon tableau corre Image + Tableau... [ par MAsterC ] Salut à tous!Exist-il un moyen de faire un étirement avec une image en Background dans un tableau?Merci d'avance MAsterC - Power Of Dream. <img src=/i Deplacement d'une image [ par missceline33 ] Bonjour, j'ai un petit probl&#232;me. J'ai un tableau contenant une image et je souhaite pouvoir d&#233;placer cette image de mani&#232;re assez flui étirer image avec du css [ par eax ] bonsoir,je souhaite mettre une image en fond dans un tableau (dans la balise TD). je souhaiterai que cette image soit étirée, qu'elle prenne toute la Image centrée en fond de tableau... [ par orelien ] Bonjour,J'aimerais placer une image en fond d'un tableau mais centrée...Merci.Orélien. faire défiler du texte et integrer un javascript sur une image [ par melane35 ] Bonjour, je suis toute nouvelle sur ce site et je réalise actuellement 1 site avec dreamweaver. J'ai quelques questions : il me semble qu'il est possi Figer des colonnes [ par mlelorra ] BonjourJ'ai une page ou il y a un tableau. Ce tableau est constitué d'une quinzaine de colonnes et l'ensemble ne peut pas s'afficher sans faire défile faire apparaitre une image en selectionnant une cellule d'un tableau [ par magouya ] bonjour &#224; tous! Je sollicite votre aide concernant un site que je dois creer (c'est la premi&#232;re fois que l'on me propose de faire un site), Défiler une image par drag à l'intérieur d'un bloc [ par douggy12 ] Bonjour,Je cherche un script assez commun je pense mais je ne trouve pas :Il s'agit de faire défiler une image avec le maintien du clic gauche de la s De l'aide ! - Image réalisé à partir d'un tableau (X,Y,Z) [ par raftanelle ] BONJOUR.J'ai beau chercher, je ne trouve pas.Il me faudrait un programme pour cr&#233;er une image (bmp, jpg, ou autre) &#224; partire d'un nuage de p


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Green Energy Solutions With Light Bulb Morphed Into LandscapePhoto Single Large Rock Formation in Monument Valley
Photo Tourist Taking a Photograph of Mountains in Yosemite 

Visiter la photothèque
 
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 : 0,421 sec (4)

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)