Parlons de la façon dont jquery peut obtenir des effets de carrousel fluides

Les images carrousel transparentes sont de nos jours une méthode d'affichage très populaire dans la conception Web, qui peut apporter une bonne expérience visuelle aux utilisateurs. jQuery est une bibliothèque JavaScript très couramment utilisée qui peut nous aider à implémenter facilement des carrousels transparents.

1. Structure HTML

Vous devez d'abord créer une liste ul pour afficher les images, et il y a une image correspondante à l'intérieur de chaque balise li.

<div class="slider">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
  </ul>
</div>

Il s'agit de la structure HTML de base, nous devons ensuite ajouter des styles CSS pour la rendre plus belle.

2. Style CSS

Dans le fichier CSS, nous devons définir le style de ul sur display:flex pour afficher l'image sur une seule ligne. Nous devons également définir la largeur et la hauteur de chaque li afin que toutes les images soient disposées sur la même ligne. Dans le même temps, nous devons également ajouter un calque de masque à la couche externe de ul pour masquer le débordement de l'image.

.slider{
  overflow:hidden;
  position:relative;
}
ul{
  display:flex;
  width:400%;
  position:relative;
  left:0;
  margin:0;
  padding:0;
  transition:left 1s;
}
li{
  flex-basis:25%;
  margin:0;
  padding:0;
}

L'attribut flex-basis ici est utilisé pour définir la proportion de la largeur de chaque balise li par rapport à l'ensemble de la liste ul.

3. Implémentation de JavaScript

Dans le fichier JS, nous devons utiliser jQuery pour contrôler le carrousel d'images. Tout d’abord, nous devons définir une minuterie pour contrôler l’intervalle du carrousel. Ensuite, ajoutez une animation au minuteur pour décrémenter la valeur gauche de toutes les images d'une valeur, de sorte que toute la liste ul se déplace vers la gauche de la largeur de l'image. Lorsque la dernière image est atteinte, elle doit passer immédiatement à la première image, c'est-à-dire ajuster la valeur gauche de toute la liste ul à 0.

$(document).ready(function(){
  var timer=setInterval(autoplay,3000);
  function autoplay(){
    var imgWidth=$("li").width();
    $("ul").animate({left:"-="+imgWidth},1000,function(){
      var firstImg=$("li:first-child");
      $("ul").append(firstImg);
      $("ul").css("left",0);
    });
  }
})

Dans ce code, nous obtenons d'abord la largeur de chaque image via la méthode width() de jQuery, puis utilisons la méthode animate() pour obtenir l'effet d'animation. Nous définissons la valeur gauche de la liste ul moins la largeur de l'image, puis insérons la première balise li à la fin de la liste ul dans la fonction de rappel, puis ajustons la valeur gauche de toute la liste ul à 0 pour obtenir un carrousel transparent. effet.

4. Résumé

Grâce aux étapes ci-dessus, nous pouvons utiliser jQuery pour implémenter une simple image de carrousel transparente. Bien entendu, il existe de nombreuses autres méthodes d’implémentation, comme l’utilisation d’animations CSS3 ou d’autres frameworks JavaScript. Cependant, quelle que soit la méthode utilisée, l'essentiel pour réaliser un carrousel transparent consiste à utiliser JS pour contrôler l'animation du mouvement de l'image et gérer les problèmes logiques lorsque le carrousel atteint la dernière image.

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!