Afficher une image toutes x secondes

**JEFF89** · 28/02/2017, 10h37

Bonjour,

sur base de cette discussion : Afficher une image toutes les 20 secondes

Effectivement , celà fonctionne , mais les différentes images restent présentes sur la pages .
Toutefois, la première image change à chaque intervalle avec les différentes images , mais les images se callent sur la taille de la plus grande.

je ne connais pas le JS, mais ce code simple est très efficace , par rapport à ce que j'ai pu voir avec du CSS.

Quelles code supplémentaire faudrait-il ajouter en pour supprimer les images fixes, et que les images s'affichent au centre à leur taille respective ?

**badaze** · 28/02/2017, 21h02

Voici un exemple.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var slideimages = new Array();
var imgsname    = new Array();
imgsname[0]     = "image1.jpg";
imgsname[1]     = "image2.jpg";
imgsname[2]     = "image3.jpg";
imgsname[3]     = "image4.jpg";
/* Vitesse du diaporama en millisecondes */
var slideshowspeed=2000;
var i=0;
var init=1;
 
 
slideimages[i]     = new Image();
slideimages[i].src = imgsname[i];
 
/* Fonction principale (a integrer dans la balise body onload */
function slideit(){
  
  if (slideimages[i].complete) {
 
   document.getElementById('slide').src= slideimages[i].src;
 i++;
 if (i < imgsname.length) {
  if (slideimages[i] == null) {
   slideimages[i]     = new Image();
  }
 } else {
  i = 0;
 }
 slideimages[i].src = imgsname[i];
  }
  setTimeout("slideit()",slideshowspeed)
}
</script>
 
</head>
 
<body onLoad="slideit();return true;">
<div align="center">
<img src="" id="slide" />
</div>
</body>
</html>

**JEFF89** · 01/03/2017, 11h02

Bonjour Badaze,

Merci de m’avoir fourni ce petit bout de code qui fonctionne très bien, dans le header2 de mon site.
Voici mon site, on peut voir le résultat :

http://art-gtc.com/index.html

c’est quand même plus agréable que d’utiliser la balise marquee !

Par contre dans la feuille CSS, j’ai dû décaler la marge de gauche de 85 pixels, pour que toutes les images soient à peu près centrées.
En effet, après l’apparition d’une petite image, celle-ci se décale vers la droite.

J’ai bien essayé avec margin gauche et droite en auto mais cela ne fonctionne pas, dans le CSS.

Cependant le résultat est pour moi très satisfaisant, même si ce n'ai pas totalement centré

Désormais tout le code se trouve en HTML cinq.

Le code JS me convenait également.

Merci encore de ton aide .

JEFF89