Implémenter un LUN coulissant avec jQuery

Avec la popularité des appareils mobiles et la popularité des carrousels coulissants, utiliser jQuery pour implémenter des carrousels coulissants est devenu l'une des tâches inévitables du développement front-end. Cet article vous expliquera comment utiliser jQuery pour implémenter un carrousel coulissant. J'espère que cela sera utile pour votre développement front-end.

1. Structure HTML

Tout d'abord, nous devons construire la structure HTML de base. Dans cet exemple, nous avons besoin d'un conteneur qui enveloppe l'image et d'un conteneur qui contient les points de navigation. Le code est le suivant :

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img src="image1.jpg"></li>
    <li class="slider-item"><img src="image2.jpg"></li>
    <li class="slider-item"><img src="image3.jpg"></li>
    <!-- 更多图片 -->
  </ul>
  <ul class="slider-nav">
    <li class="slider-nav-item active"></li><!-- 第一个导航点默认选中 -->
    <li class="slider-nav-item"></li>
    <li class="slider-nav-item"></li>
    <!-- 更多导航点 -->
  </ul>
</div>

2. Style CSS

Ensuite, nous devons définir le style CSS pour l'image du carrousel. Tout d’abord, nous devons définir la largeur et la hauteur du conteneur contenant l’image et masquer la partie de débordement du conteneur. Le code est le suivant :

.slider {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.slider-wrapper {
  position: relative;
  width: 300%;
  height: 400px; /* 需要与.slider一致 */
  left: 0;
}
.slider-item {
  position: relative;
  float: left;
  width: 33.3333%;
  height: 400px; /* 需要与.slider一致 */
}

Ensuite, nous devons définir le style CSS pour le point de navigation. Le code est le suivant :

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}
.slider-nav-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.slider-nav-item.active {
  background-color: #f00;
}

3. Code JavaScript

Enfin, nous devons utiliser jQuery pour implémenter le graphique carrousel. Tout d'abord, nous devons définir certaines variables, notamment l'index de l'image du carrousel actuelle (index), le conteneur contenant l'image ($wrapper), le conteneur du point de navigation ($nav), le point de navigation ($navItems) et le numéro d'images carrousel (imgCount ). Le code est le suivant :

var index = 0;
var $wrapper = $('.slider-wrapper');
var $nav = $('.slider-nav');
var $navItems = $nav.find('.slider-nav-item');
var imgCount = $wrapper.find('.slider-item').length;

Ensuite, nous devons définir une fonction pour lire automatiquement l'image du carrousel. La méthode d'implémentation de cette fonction consiste à mettre à jour en permanence l'index de l'image actuelle du carrousel et à laisser le conteneur contenant l'image se déplacer de la distance correspondante. Le code est le suivant :

function autoplay() {
  index++;
  if (index >= imgCount) {
    index = 0;
  }
  $wrapper.animate({
    left: '-' + (index * 100) + '%'
  }, 500);
  $navItems.eq(index).addClass('active').siblings().removeClass('active');
}

Enfin, nous devons définir un timer pour permettre au carrousel de jouer automatiquement dans un certain intervalle. Le code est le suivant :

var intervalId = setInterval(autoplay, 3000);

Si l'utilisateur clique sur le point de navigation, le minuteur doit être annulé et le graphique carrousel passe à la position correspondante. Le code est le suivant :

$navItems.on('click', function() {
  clearInterval(intervalId);
  index = $(this).index();
  $wrapper.animate({
    left: '-' + (index * 100) + '%'
  }, 500);
  $navItems.eq(index).addClass('active').siblings().removeClass('active');
  intervalId = setInterval(autoplay, 3000);
});

4. Résumé

Lorsque vous utilisez jQuery pour implémenter un carrousel coulissant, vous devez faire attention aux points suivants :

1. La structure HTML doit contenir des conteneurs pour tous les carrousels et points de navigation, comme ainsi que l'élément HTML pour les images et les points de navigation.
2. Les styles CSS doivent définir la largeur et la hauteur du conteneur contenant l'image et masquer la partie de débordement du conteneur.
3. Vous devez définir des variables telles que l'index de l'image du carrousel, le conteneur contenant l'image, le conteneur du point de navigation, le nombre de points de navigation et l'image du carrousel.
4. La fonction carrousel de lecture automatique doit mettre à jour en permanence l'index du carrousel actuel afin que le conteneur contenant l'image se déplace de la distance correspondante.
5. Vous devez utiliser une minuterie pour que le carrousel soit automatiquement lu dans un certain intervalle.
6. Si l'utilisateur clique sur le point de navigation, le minuteur doit être annulé et le graphique carrousel passe à la position correspondante.

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!