Comment faire un carrousel avec jquery

Avec la popularité des appareils mobiles, les carrousels sont devenus l'une des fonctionnalités communes de nombreux sites Web et applications. jQuery est une bibliothèque JavaScript largement utilisée qui fournit de nombreuses méthodes pratiques et pratiques, ce qui rend le développement de carrousels très simple et facile.

Les étapes suivantes vous montreront comment utiliser jQuery pour créer un simple graphique carrousel. Tout d’abord, nous devons préparer du code HTML et CSS de base.

Code HTML

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="image1.jpg" alt="Slide 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
  </div>
  <div class="controls">
    <span class="prev">Previous</span>
    <span class="next">Next</span>
  </div>
</div>

Code CSS

.slider {
  position: relative;
  height: 300px;
  width: 600px;
  overflow: hidden;
}

.slides {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 300%;
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s ease;
}

.slide {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  max-height: 100%;
  max-width: 100%;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.controls span {
  margin: 0 10px;
  cursor: pointer;
}

Dans le code HTML ci-dessus, nous avons un carrousel contenant trois images. Les images sont stockées dans des balises img et chaque image est enveloppée dans un élément div avec un nom de classe slide. Les boutons de contrôle du carrousel se trouvent en bas de l'élément div, et utilisent span avec les prev et next</code > noms de classes Représentation des éléments. <code>img标签中，每张图片被包装在一个具有slide类名的div元素中。轮播图的控制按钮在div元素的底部，并且使用具有prev和next类名的span元素表示。

在CSS代码中，我们将轮播图容器的高度和宽度设置为300px和600px，并且设置overflow: hidden以确保只显示一个div元素。所有的slide元素都有相同的高度，并且使用Flex布局在父元素中进行水平布局。控制按钮居中定位，并且使用Flex布局进行水平对齐。

现在我们可以逐步创建轮播图代码。

第一步，我们需要使用jQuery选择轮播图中的相关元素并存储它们的引用，以便在之后的代码中使用。如下所示：

var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $prev = $slider.find('.prev');
var $next = $slider.find('.next');

第二步，我们需要计算每个slide元素的宽度，并将它们排列在一行中。如下所示：

var slideWidth = $slide.width();
$slides.css('width', slideWidth * $slide.length + 'px');

第三步，我们需要编写next和prev函数，以便在点击控制按钮时轮播图可以动起来。这里的具体实现涉及到计算偏移量的复杂数学运算，但是可以使用animate()函数来实现。如下所示：

$next.on('click', function() {
  $slides.animate({left: '-=' + slideWidth}, 600, function() {
    $slides.append($slides.find('.slide:first-of-type'));
    $slides.css('left', '');
  });
});

$prev.on('click', function() {
  $slides.animate({left: '+=' + slideWidth}, 600, function() {
    $slides.prepend($slides.find('.slide:last-of-type'));
    $slides.css('left', '');
  });
});

在第四步中，我们需要设置一个循环定时器，以便每隔一段时间自动运行next

Dans le code CSS, nous définissons la hauteur et la largeur du conteneur du carrousel sur 300px et 600px, et définissons overflow: Hidden sur Make assurez-vous qu'un seul élément div est affiché. Tous les éléments slide ont la même hauteur et sont disposés horizontalement dans l'élément parent à l'aide de la disposition Flex. Les boutons de commande sont centrés et alignés horizontalement grâce à la disposition Flex.

Nous pouvons maintenant créer le code du carrousel étape par étape.

Dans la première étape, nous devons utiliser jQuery pour sélectionner les éléments pertinents dans le carrousel et stocker leurs références pour les utiliser dans le code suivant. Comme indiqué ci-dessous :

var interval = setInterval(function() {
  $next.click();
}, 3000);

Dans la deuxième étape, nous devons calculer la largeur de chaque élément slide et les disposer dans une rangée. Comme indiqué ci-dessous : 🎜

$slider.on('mouseenter', function() {
  clearInterval(interval);
});

$slider.on('mouseleave', function() {
  interval = setInterval(function() {
    $next.click();
  }, 3000);
});

🎜Dans la troisième étape, nous devons écrire les fonctions next et prev afin que l'image du carrousel puisse bouger lorsque vous cliquez sur le bouton de contrôle. L'implémentation spécifique ici implique des opérations mathématiques complexes pour calculer le décalage, mais elle peut être réalisée en utilisant la fonction animate(). Comme indiqué ci-dessous : 🎜

var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $prev = $slider.find('.prev');
var $next = $slider.find('.next');

var slideWidth = $slide.width();
$slides.css('width', slideWidth * $slide.length + 'px');

$next.on('click', function() {
  $slides.animate({left: '-=' + slideWidth}, 600, function() {
    $slides.append($slides.find('.slide:first-of-type'));
    $slides.css('left', '');
  });
});

$prev.on('click', function() {
  $slides.animate({left: '+=' + slideWidth}, 600, function() {
    $slides.prepend($slides.find('.slide:last-of-type'));
    $slides.css('left', '');
  });
});

var interval = setInterval(function() {
  $next.click();
}, 3000);

$slider.on('mouseenter', function() {
  clearInterval(interval);
});

$slider.on('mouseleave', function() {
  interval = setInterval(function() {
    $next.click();
  }, 3000);
});

🎜Dans la quatrième étape, nous devons configurer une minuterie de boucle pour exécuter automatiquement la fonction next de temps en temps. Comme indiqué ci-dessous : 🎜rrreee🎜La dernière étape consiste à interdire à l'utilisateur de cliquer sur le bouton de commande lorsque l'image du carrousel est en mouvement afin d'éviter les chevauchements d'animation et les erreurs de carrousel. Comme indiqué ci-dessous : 🎜rrreee🎜Maintenant, nous avons complété un simple graphique carrousel. L'extrait de code complet ressemble à ceci : 🎜rrreee🎜Après avoir terminé les étapes ci-dessus, vous pouvez personnaliser l'apparence et les fonctionnalités du carrousel à l'aide de vos propres styles CSS et code HTML, et l'intégrer de manière transparente dans votre site Web. 🎜

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!