Changement automatique d'une image

Messages postés
1
Date d'inscription
mercredi 4 septembre 2019
Statut
Membre
Dernière intervention
4 septembre 2019
- - Dernière réponse : jordane45
Messages postés
26279
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 septembre 2019
- 4 sept. 2019 à 21:54
Bonjour à toutes et à tous,

Je souhaite faire défiler des photos automatiquement sur ma page.

J'ai pu trouver une solution via le code ci-dessous :


<!DOCTYPE html>

<html>
<head>
<title>change picture</title>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}

function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}

function startTimer() {
setInterval(displayNextImage, 3000);
}

var images = [], x = -1;
images[0] = "IMAGE 1";
images[1] = "IMAGE 2";
</script>
</head>

<body onload = "startTimer()">
<img id="img" src="IMAGE 1"/>
<button type="button" onclick="displayPreviousImage()">Revenir</button>
<button type="button" onclick="displayNextImage()">Suivant</button>
</body>
</html>


Ce code marche correctement, mais j'aurai besoin d'ajouter deux éléments :
- le défilement est trop rapide. Comment puis-je réduire le défilement des images ? 8/9 secondes par image, ce serait parfait.
- lorsque l'image est figée, j'aimerai aussi pouvoir lier l'adresse d'un fichier qui serait propre à chaque image et s'ouvrirait par un clic. Comment puis-je mettre cela en place ?

Je suis débutant mais j'apprends vite.

Si vous pouvez m'aider, ce serait vraiment top !

Bonne soirée.

Benjamin
Afficher la suite 

1 réponse

Messages postés
26279
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
14 septembre 2019
1783
0
Merci
Bonjour,

1 - Merci, à l'avenir, de poster ton code en utilisant les balises de code.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

2 - Ta question concerne le code Javascript ... il aurait donc fallu la poster dans le forum Javascript.

3 - Pour la durée.. il suffit de modifier la valeur du setInterval

4 - Pour ajouter un lien... il faut modifier le code javascript...

Mais bon... il serait certainement plus simple pour toi d'utiliser un plugin de carousel comme il en existant tant sur le net.
Ils sont faciles à mettre en place et à configurer.

Il n'y a qu'à choisir.. par exemple ici : https://www.jqueryscript.net/blog/best-carousel.html


Commenter la réponse de jordane45