71 lines
1.8 KiB
HTML
71 lines
1.8 KiB
HTML
|
<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>
|