Discussion :

[Zeus_Appolos]

Bonsoir Tout le monde, je début en JavaScript, j'ai besoin de votre aide
en faite j'ai 4 images que j'ai prises pour faire ma bannière.
je veux qu'à 3s les images permutent.
img 2 prenne la position de imag 1
img 3 prenne la position de imag 2
img 4 prenne la position de imag 3
img 1 prenne la position de imag 4

j'ai fais le script qui passe par un click de bouton mais je veux que cela soit automatique.
je ne sais pas ou je vais l'appelé.
html

Code html :

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

1
2
3
4
5
6
<div class="slides">
                <img class="slide" src="images/1.jpg" alt="">
                <img class="slide" src="images/2.jpg" alt="">
                <img class="slide" src="images/3.jpg" alt="">
                <img class="slide" src="images/4.jpg" alt="">
            </div>

js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var permuteImg = function (){
 
    for ( let i = 0; i < nb_img.length; i++) {
        var temp= nb_img[i].src;
        nb_img[i].src=nb_img[i+1].src
        nb_img[i+1].src=temp;
 
    }
}
var nb_img = document.querySelectorAll('.slides img');
document.addEventListener('DOMContentLoaded',  setTimeout(permuteImg,3000);

[NoSmoking]

Bonjour,
si une solution en CSS te convient je te propose de jeter un coup d'oeil à :

• Diaporama avec défilement automatique
• Diaporama avec effet fade in/out

[NoSmoking]

Re,
si cela t'intéresse j'ai déposé une contribution JavaScript qui pourrait te convenir :
↪ Diaporama en 3 lignes de code