Maison >interface Web >js tutoriel >Comment créer un carrousel à défilement automatique en utilisant HTML, CSS et jQuery

Comment créer un carrousel à défilement automatique en utilisant HTML, CSS et jQuery

WBOYoriginal: 2023-10-24 08:37:581419parcourir

Avec le développement d'Internet, les carrousels sont devenus l'un des éléments courants et nécessaires dans la conception Web. L'utilisation de carrousels sur les pages d'accueil de sites Web ou les pages d'affichage de produits peut afficher de manière vivante plusieurs images ou contenus, attirant l'attention des utilisateurs et améliorant leur expérience. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer un graphique carrousel à défilement automatique et fournira des exemples de code spécifiques, dans l'espoir d'être utile aux débutants.

Tout d'abord, nous devons établir la structure de base du carrousel dans le fichier HTML. Ce qui suit est un exemple de code HTML simple :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自动滚动轮播图</title>
  <style>
    .slider {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }
    .slider .slides {
      width: 300%;
      height: 100%;
      display: flex;
    }
    .slider .slides .slide {
      width: 33.33%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="slide1.jpg" alt="Slide 1">
      </div>
      <div class="slide">
        <img src="slide2.jpg" alt="Slide 2">
      </div>
      <div class="slide">
        <img src="slide3.jpg" alt="Slide 3">
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Dans le code ci-dessus, nous avons créé un conteneur carrousel nommé .slider et défini la largeur du conteneur sur 600px et la hauteur sur 400px et défini <. code>overflow : masqué pour masquer le contenu qui dépasse la taille du conteneur. Dans la classe .slides, la largeur du conteneur de l'image du carrousel est définie sur 300 % (soit trois fois la largeur de chaque image en définissant la largeur du .slide classe à 33,33 % pour disposer les trois images de manière égale dans une rangée. <code>.slider的轮播图容器，设置了容器的宽度为600px，高度为400px，并设置overflow: hidden来隐藏超出容器大小的内容。在.slides类中设置了轮播图图片的容器宽度为300%（即每张图片宽度的三倍），通过设置.slide类的宽度为33.33%将三张图片均匀地排列在一行内。

接下来，我们需要使用jQuery来实现轮播图的自动滚动效果。我们将代码写在一个名为script.js的外部JavaScript文件中（也可以写在HTML文件内的<script></script>标签中）。下面是一个简单的jQuery代码示例：

$(document).ready(function() {
  var slideCount = $('.slide').length;
  var slideWidth = $('.slide').width();
  var slideHeight = $('.slide').height();
  var slideContainerWidth = slideCount * slideWidth;
  
  $('.slides').css({ width: slideContainerWidth, marginLeft: -slideWidth });
  
  function slideNext() {
    $('.slides').animate({
      left: -slideWidth
    }, 1000, function() {
      $('.slide:first-child').appendTo('.slides');
      $('.slides').css('left', '');
    });
  }
  
  setInterval(slideNext, 2000);
});

在上述代码中，我们首先使用$(document).ready()方法来确保页面加载完成后执行代码。然后，我们获取轮播图的总数量、图片宽度、图片高度以及轮播图容器的宽度。通过设置.slides的宽度为slideContainerWidth并将其marginLeft属性设置为-slideWidth，我们将第一张图片的一部分隐藏在容器之外。

接下来，我们定义一个名为slideNext()的函数来实现轮播图的滚动效果。使用.animate()方法，我们将.slides向左移动一个slideWidth的距离，持续时间为1000毫秒（即1秒）。当动画完成后，我们将第一张图片移动到.slides的末尾，并将.slides的left属性重置为空。这样就实现了图片的无缝滚动效果。

最后，我们使用setInterval()函数来循环执行slideNext()

Ensuite, nous devons utiliser jQuery pour obtenir l'effet de défilement automatique du carrousel. Nous écrivons le code dans un fichier JavaScript externe appelé script.js (il peut également être écrit dans la balise <script></script> dans le fichier HTML). Voici un exemple simple de code jQuery :

rrreee

Dans le code ci-dessus, nous utilisons d'abord la méthode $(document).ready() pour garantir que le code est exécuté après le chargement de la page. Ensuite, nous obtenons le nombre total d’images du carrousel, la largeur de l’image, la hauteur de l’image et la largeur du conteneur d’images du carrousel. En définissant la largeur de .slides sur slideContainerWidth et en définissant sa propriété marginLeft sur -slideWidth, nous masquons une partie de la première image dans le conteneur à l'extérieur . 🎜🎜Ensuite, nous définissons une fonction nommée slideNext() pour implémenter l'effet de défilement du carrousel. En utilisant la méthode .animate(), nous déplaçons .slides d'une distance de slideWidth vers la gauche pour une durée de 1000 millisecondes (soit 1 seconde). . Une fois l'animation terminée, nous déplaçons la première image à la fin de .slides et réinitialisons la propriété gauche de .slides à vide. Cela permet d'obtenir un effet de défilement transparent pour les images. 🎜🎜Enfin, nous utilisons la fonction setInterval() pour boucler la fonction slideNext() et faire défiler toutes les 2 secondes. 🎜🎜En utilisant le code ci-dessus, vous pouvez créer et exécuter un carrousel avec effet de défilement automatique. Vous pouvez personnaliser la taille, le nombre d'images et la vitesse de défilement du conteneur carrousel selon vos besoins. J'espère que cet article pourra vous aider à apprendre à utiliser HTML, CSS et jQuery pour créer des carrousels ! 🎜

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!

JavaScript jquery css html 循环 JS overflow

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer une navigation supérieure collante en utilisant HTML, CSS et jQueryArticle suivant：Comment créer une navigation supérieure collante en utilisant HTML, CSS et jQuery

Articles Liés

Voir plus