Comment définir un bloc de carrousels d'images en javascript css-Questions et réponses frontales-php.cn

Comment définir un bloc de carrousels d'images en javascript css

PHPz

Libérer： 2023-04-21 15:16:30

original

168 Les gens l'ont consulté

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">&#10094;</button>
   <button class="slider-next">&#10095;</button>
</div></code>

Copier après la connexion

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>

Copier après la connexion

在这个CSS中，我们首先设置了包含轮播的<div>

Ensuite, nous utiliserons CSS pour configurer l'interface utilisateur de ce diaporama.

<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>

Copier après la connexion

Dans ce CSS, nous définissons d'abord la position et la taille de l'élément <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>

Copier après la connexion

Ce code sélectionne nos éléments de diapositive et de bouton et ajoute une action de clic pour que la diapositive puisse avancer ou reculer. Chaque clic sur un bouton est géré par son propre écouteur d'événement. En cas de clic, nous vérifions d'abord si la diapositive a atteint la dernière, si c'est le cas, nous réinitialisons l'index de la diapositive à zéro. Sinon, nous déplaçons simplement une diapositive vers l’avant ou vers l’arrière et appelons la fonction moveSlides() pour basculer entre les groupes de diapositives.

Enfin, nous devons ajouter une fonction de rotation automatique, qui fera automatiquement pivoter les diapositives sans intervention de l'utilisateur.

<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">&#10094;</button>
   <button class="slider-next">&#10095;</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>

Copier après la connexion

Ici, nous utilisons une fonction setInterval qui fait automatiquement avancer la diapositive toutes les 5 secondes. Nous avons également ajouté des écouteurs d'événements mouseover et mouseout pour arrêter et exécuter le carrousel automatique lorsque l'utilisateur survole la diapositive.

OK, nous avons terminé la conception et le développement de notre carrousel d'images. Le code final est le suivant : 🎜rrreee🎜 Maintenant, si vous copiez ce code dans votre fichier local et remplacez l'image et le chemin du diaporama par votre propre contenu, vous obtiendrez un magnifique carrousel d'images JavaScript et CSS. 🎜

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!