Se connecter avec
S'enregistrer | Connectez-vous

[HTML et javascript] Affichage d'images à tour de rôle

Dernière réponse : dans Programmation

Bonjour,

Je souhaiterais écrire un code qui me permettrait d'afficher une série de 5 images. Le passage d'une image à l'autre se ferait après 1 ou 2 secondes.

Pour afficher une image, je suppose que le seul code htlm suffit:
  1. <html>
    

  2.  
  3. <head>
    

  4. <title>test n°1</title>
    

  5. </head>
    

  6.  
  7. <body>
    

  8.  
  9.  
  10. <img src="<a href="http://ns6042.ovh.net/~abrutisv/photos/p2yfe4a3.jpg" target="_blank">http://ns6042.ovh.net/~abrutisv/photos/p2yfe4a3.jpg</a>">
    

  11. ...
    

  12. ...
    

  13. ...
    

  14. ...
    

  15.  
  16.  
  17. </body>
    

  18.  
  19. </html>


Ce que j'arrive pas à faire, c'est intégrer le changement d'image dans le même emplacement.

Je suppose que je dois me servir de javascript mais j'ai une certaine méconnaissance de ce langage.


Merci de m'aider ou de m'aiguiller sur la solution.

Autres pages sur : html javascript affichage images tour role

Lassé par la pub ? Créez un compte
Expert Programmation

pour le temps, tu peux utiliser la fonction setTimeout en javascript.
Après pour changer l'image, tu fais un document.getElementById('nom-de-ta-photo').src= "l'url de ta nouvelle image";

je pense ke ce script est pa mal a vous den juger ^^

Entre les deux balises <head> et </head>
<!-- DEBUT DU SCRIPT SLIDESHOW-->

<script>



// Changer les variables suivantes
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpeg'
Pic[2] = '3.gif'
Pic[3] = '../images/perso/4.jpg'
Pic[4] = '5.jpg'

// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image()
preLoad.src = Pic
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
<!-- FIN DU SCRIPT SLIDESHOW-->

Dans la ligne de la balise <body>
<!-- DEBUT DU SCRIPT -->
<body onload="runSlideShow()">
<!-- FIN DU SCRIPT -->



Entre les deux balises <body> et </body>
<!-- DEBUT DU SCRIPT SLIDESHOW-->
<p align="center"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table></p>
<!-- FIN DU SCRIPT SLIDESHOW-->
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde