<html>
<head>
<title>Diaporama d'images</title>
<style>
/* Mettre en forme le diaporama */
.slideshow {
display: flex;
}
.slideshow img {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<h1>Diaporama d'images</h1>
<div class="slideshow">
<img src="" id="image">
</div>
<button id="previous">Précédent</button>
<button id="next">Suivant</button>
<script>
// Tableau d'images
var images = [
'img/image1.jpg',
'img/image2.jpg',
'img/image3.jpg',
'img/image4.jpg',
'img/image5.jpg',
'img/image6.jpg',
'img/image7.jpg',
'img/image8.jpg',
'img/image9.jpg',
'img/image10.jpg'
];
// Éléments HTML
var imageElement = document.getElementById('image');
var previousButton = document.getElementById('previous');
var nextButton = document.getElementById('next');
// Index de l'image en cours
var currentIndex = 0;
// Afficher l'image en cours
imageElement.src = images[currentIndex];
// Fonction pour passer à l'image suivante
function next() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
imageElement.src = images[currentIndex];
}
// Fonction pour passer à l'image précédente
function previous() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
imageElement.src = images[currentIndex];
}
// Événements pour les boutons
previousButton.addEventListener('click', previous);
nextButton.addEventListener('click', next);
</script>
</body>
</html>