Sujet Précédent Sujet Suivant

Changement automatique d'une image

Fermé
benjaminbouk Messages postés 1 Date d'inscription mercredi 4 septembre 2019 Statut Membre Dernière intervention 4 septembre 2019 - 4 sept. 2019 à 21:37
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 - 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
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
4 sept. 2019 à 21:54
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


0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse