Avec le développement continu d'Internet, les carrousels d'images sont devenus un élément important de la conception et du développement de sites Web. Dans cet article, nous verrons comment créer un carrousel d'images à l'aide de JavaScript et CSS.
Tout d'abord, nous avons besoin d'un modèle HTML et de quelques CSS pour définir l'apparence du carrousel.
<code class="html"><div class="slider-container"> <div class="slider-wrapper"> <div class="slider-slide"> <img src="image1.jpg"> </div> <div class="slider-slide"> <img src="image2.jpg"> </div> <div class="slider-slide"> <img src="image3.jpg"> </div> <div class="slider-slide"> <img src="image4.jpg"> </div> </div> <button class="slider-prev">❮</button> <button class="slider-next">❯</button> </div></code>
Dans ce modèle HTML, nous utilisons un élément <div>
qui contient une image sous forme de diaporama séparé. Nous placerons ces diapositives dans un élément parent qui contient toutes les diapositives. En bas, nous avons également deux boutons « précédent » et « suivant » qui contrôlent le diaporama. <div>
元素作为一个单独的幻灯片。我们将把这些幻灯片放在一个包含所有幻灯片的父元素中。在底部,我们还有两个控制幻灯片的“prev”和“next”按钮。
接下来,我们将使用CSS来设置这个幻灯片的UI。
<code class="css">.slider-container { position: relative; width: 100%; height: 500px; overflow: hidden; } .slider-wrapper { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.5s ease; } .slider-slide { flex: 1; display: flex; align-items: center; justify-content: center; } .slider-slide img { max-width: 100%; max-height: 100%; object-fit: contain; } .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: white; font-size: 20px; border: none; cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease; } .slider-next { right: 20px; } .slider-prev { left: 20px; } .slider-prev:hover, .slider-next:hover { opacity: 0.8; }</code>
在这个CSS中,我们首先设置了包含轮播的<div>
<code class="javascript">var sliderWrapper = document.querySelector('.slider-wrapper'); var slides = document.querySelectorAll('.slider-slide'); var prevBtn = document.querySelector('.slider-prev'); var nextBtn = document.querySelector('.slider-next'); var slideIndex = 0; function moveSlides() { sliderWrapper.style.transform = "translateX(" + (-slides[slideIndex].offsetLeft) + "px)"; } nextBtn.addEventListener('click', function() { if (slideIndex >= slides.length - 1) { slideIndex = 0; } else { slideIndex++; } moveSlides(); }); prevBtn.addEventListener('click', function() { if (slideIndex <= 0) { slideIndex = slides.length - 1; } else { slideIndex--; } moveSlides(); });</code>
<div>
qui contient le carrousel. Ensuite, nous définissons la position et la taille de chaque diapositive dans le slider-wrapper. L'astuce ici est de faire de chaque diapositive un conteneur flexible afin qu'elle puisse centrer l'image. Enfin, nous définissons la position, le style et la fonctionnalité de nos boutons « précédent » et « suivant ». Maintenant que nous avons configuré l'apparence et l'interface utilisateur de notre diaporama carrousel, nous devons ajouter un peu de logique à l'aide de JavaScript.
<code class="javascript">var sliderInterval = setInterval(function() { if (slideIndex >= slides.length - 1) { slideIndex = 0; } else { slideIndex++; } moveSlides(); }, 5000); sliderWrapper.addEventListener('mouseenter', function() { clearInterval(sliderInterval); }); sliderWrapper.addEventListener('mouseleave', function() { sliderInterval = setInterval(function() { if (slideIndex >= slides.length - 1) { slideIndex = 0; } else { slideIndex++; } moveSlides(); }, 5000); });</code>
<code class="html"><div class="slider-container"> <div class="slider-wrapper"> <div class="slider-slide"> <img src="image1.jpg"> </div> <div class="slider-slide"> <img src="image2.jpg"> </div> <div class="slider-slide"> <img src="image3.jpg"> </div> <div class="slider-slide"> <img src="image4.jpg"> </div> </div> <button class="slider-prev">❮</button> <button class="slider-next">❯</button> </div> <style> .slider-container { position: relative; width: 100%; height: 500px; overflow: hidden; } .slider-wrapper { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.5s ease; } .slider-slide { flex: 1; display: flex; align-items: center; justify-content: center; } .slider-slide img { max-width: 100%; max-height: 100%; object-fit: contain; } .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: white; font-size: 20px; border: none; cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease; } .slider-next { right: 20px; } .slider-prev { left: 20px; } .slider-prev:hover, .slider-next:hover { opacity: 0.8; } </style> <script> var sliderWrapper = document.querySelector('.slider-wrapper'); var slides = document.querySelectorAll('.slider-slide'); var prevBtn = document.querySelector('.slider-prev'); var nextBtn = document.querySelector('.slider-next'); var slideIndex = 0; function moveSlides() { sliderWrapper.style.transform = "translateX(" + (-slides[slideIndex].offsetLeft) + "px)"; } nextBtn.addEventListener('click', function() { if (slideIndex >= slides.length - 1) { slideIndex = 0; } else { slideIndex++; } moveSlides(); }); prevBtn.addEventListener('click', function() { if (slideIndex <= 0) { slideIndex = slides.length - 1; } else { slideIndex--; } moveSlides(); }); var sliderInterval = setInterval(function() { if (slideIndex >= slides.length - 1) { slideIndex = 0; } else { slideIndex++; } moveSlides(); }, 5000); sliderWrapper.addEventListener('mouseenter', function() { clearInterval(sliderInterval); }); sliderWrapper.addEventListener('mouseleave', function() { sliderInterval = setInterval(function() { if (slideIndex >= slides.length - 1) { slideIndex = 0; } else { slideIndex++; } moveSlides(); }, 5000); }); </script></code>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!