Comment créer une image de carrousel HTML-Questions et réponses frontales-php.cn

Comment créer une image de carrousel HTML

WBOY

Libérer： 2023-05-06 13:13:07

original

4695 Les gens l'ont consulté

Avec le développement rapide d'Internet, la production de sites Web est devenue de plus en plus populaire et les images de carrousel sont un élément de site Web très courant qui peut rendre le site Web plus vivant et plus vivant. Comment implémenter un carrousel HTML simple ? Voyons.

Tout d'abord, dans le nouveau document HTML, introduisez un fichier .css et un fichier .js dans l'en-tête, créez un nouveau div dans le corps et ajoutez les attributs class et id.

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="slider" id="slider">
    <!--轮播图内容-->
  </div>
</body>

Copier après la connexion

Ensuite, définissez le style du carrousel dans le fichier .css. En prenant l'image du carrousel 1000 × 500 comme exemple, vous devez définir la taille et la position de l'image du carrousel, ainsi que la largeur et la hauteur de l'image. Vous devez également définir la position initiale et le temps de changement d'animation de l'image. dans l'image du carrousel.

.slider {
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border: 2px solid #ddd;
}

.slider img {
  width: 1000px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.slider img.active {
  opacity: 1;
  z-index: 1;
}

Copier après la connexion

Dans le fichier .js, ajoutez le code du carrousel. Tout d’abord, définissez une variable pour suivre l’image actuellement affichée. Ensuite, réglez une minuterie pour passer à l'image suivante après 5 000 ms. Enfin, mettez à jour la classe de l'image actuelle afin que l'image actuelle soit ajoutée à la classe active, modifiant ainsi son opacité.

var slider = document.getElementById("slider");
var images = slider.getElementsByTagName("img");

var counter = 0;

setInterval(function() {
  images[counter].classList.remove("active");
  counter++;
  if (counter == images.length) {
    counter = 0;
  }
  images[counter].classList.add("active");
}, 5000);

Copier après la connexion

Enfin, il vous suffit d'ajouter l'élément image dans le slider div, comme indiqué ci-dessous :

<div class="slider" id="slider">
  <img src="img1.jpg" class="active">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

Copier après la connexion

Il s'agit du processus d'implémentation d'une simple image de carrousel HTML. En tant qu'élément couramment utilisé sur les sites Web, les images carrousel peuvent non seulement ajouter à l'expérience visuelle du site Web, mais également améliorer l'expérience utilisateur du site Web. Commencez à créer votre propre carrousel !

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!