Implémenter des effets de carrousel basés sur jquery_jquery

Carousel est le deuxième effet dynamique implémenté lors de l'apprentissage de jquery, et c'est aussi celui qui prend le plus de temps à apprendre. Dans le processus de mise en œuvre du carrousel, nous rencontrons toujours divers problèmes. J'ai consulté de nombreuses personnes et demandé à plusieurs reprises. Aujourd'hui, je n'ose pas dire avec audace que je peux écrire un carrousel tout de suite.

J'espère enregistrer certains processus de réflexion à travers des essais.

La première est la structure HTML, un carrousel simple, un carrousel transparent d'images uniques, principalement divisé en trois couches : div>ul>li et l'image img à l'intérieur de li.

Deuxièmement, style css : div largeur et hauteur fixes, overflow : caché ; il est recommandé d'obtenir la largeur de ul de manière dynamique (la prochaine étape portera sur la façon de l'obtenir concernant li, j'ai l'habitude d'utiliser flottant) ; , afin qu'ils puissent être disposés dans l'ordre, sur l'ul N'oubliez pas d'effacer float (clear : les deux).

L'important c'est la méthode jquery, les principales utilisées sont animate(), setInterval(), hover(). Avant d'écrire la méthode, clarifions la logique de l'effet dynamique : les images glissent de droite à gauche en boucle. Lorsque la dernière image est glissée, la première image est affichée, et ainsi de suite.

1. Obtenez le nombre de longueur et de largeur

var len=$('li').length,
liWidth=$('li').width,

Parce qu'il s'agit d'un carrousel fluide, nous devons faire quelque chose pour obtenir une transition naturelle lorsque l'image glisse vers la dernière, comment pouvons-nous passer naturellement à la première à ce moment-là, si la troisième image n'en est qu'une ? morceau après le dernier, c'est bien. Par conséquent, nous devons cloner le premier morceau et l'ajouter à la fin de li

.

$('li:first').clone().appendTo('ul')

2. Obtenez la largeur de ul : la largeur de ul est égale à la largeur de tous les li plus la largeur du li cloné

ulWidth=liWidth*(len+1)

Il semble que les préparatifs soient terminés, la prochaine étape est donc d'essayer de le faire bouger. La première chose qui me vient à l'esprit est la méthode animate() :

animer(propriétés [, durée ] [, assouplissement ] [, complet ] ),

Les premières propriétés des paramètres : les attributs CSS et les objets de valeur, qui déterminent l'effet de l'animation, qu'elle soit de haut en bas ou de gauche à droite ;

Le deuxième paramètre durée : le temps pour terminer une animation, la valeur par défaut est 400, l'unité est la milliseconde

Le troisième paramètre d'assouplissement : la fonction d'assouplissement utilisée pour la transition d'animation, la valeur par défaut est swing (linéaire, swing), ce paramètre n'est généralement pas utilisé

;

Le quatrième paramètre complet : fait référence à l'opération effectuée après avoir terminé l'animation.

Notre animation se fait de droite à gauche, nous pouvons donc y parvenir en changeant la valeur de marge gauche de ul

$('ul').animate({
 'marign-left': -liWidth*index
},3000,function(){
 if(index==len){
  index=0;
  $('ul').css({'margin-left':'0px'})
 } 
}) 

L'index fait référence à la valeur d'index de li. Lorsque la valeur d'index de li est égale à la valeur de longueur de li, c'est-à-dire que l'animation a été exécutée jusqu'à la dernière image, définissez directement la marge gauche de ul. à 0 et la valeur d'index de li également 0.

Il y a un autre danger caché là-dedans, que je ne mentionnerai pas pour l’instant.

Étape suivante, lorsque la souris quitte le div, l'image sera automatiquement lue. Il s'agit d'utiliser hover() et setInterval()

setInterval() est expliqué par le W3C comme suit : appeler une fonction ou calculer une expression selon la période spécifiée (en millisecondes). La fonction est appelée en continu jusqu'à ce que clearInterval() soit appelée ou que la fenêtre soit fermée.

var autoPlay;
$('div').hover(function(){
 clearInterval(autoPlay); 
},function(){
 autoPlay=setInterval(function(){

$('ul').animate({

'marign-left': -liWidth*index
},3000,function(){
 if(index==len){
  index=0;
  $('ul').css({'margin-left':'0px'})；
　　　　index++;
 } 
});
}，3000) 
}).trigger('mouseleave');

De cette façon, une fonction de lecture automatique semble être implémentée, mais on peut aussi trouver un bug La première image semble rester un peu longue. Pourquoi ?

Ce problème a été résolu hier. Lorsque la dernière image est exécutée, son index passe immédiatement à 0, puis elle sera exécutée deux fois. Par conséquent, dans ce jugement, nous devons la laisser lorsque l'index est 0. Ajoutez 1. , index++, et placez-le sous la condition de jugement.

Il y a un autre problème, que j'ai découvert hier. Il y a deux temps dans ce carrousel, l'un est le temps d'exécution de l'animation et l'autre est le temps de lecture. que js L'ordre d'exécution est descendant. Si les temps sont cohérents ou si le dernier temps est plus petit que le premier, alors dans ce décalage horaire, l'animation ne pourra pas entrer dans les conditions de jugement et continuera à jouer, donc le le carrousel échouera. C'est tout pour aujourd'hui. La prochaine fois que je le partagerai, j'ajouterai un effet carrousel composé de flèches gauche et droite et de points de survol.

Ci-joint le code complet :

<html">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>轮播</title>
 <style>
  body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0;list-style:none;}
  body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;}
  input,select,textarea{font-size:100%;}
  .clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;font-size:0;line-height:0;}
  .clearfix{*zoom:1;}
  .big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;}
  .pic-list{height: 400px;}
  .pic-list li{float: left; width: 1920px; height: 400px;}
  </style>
</head>
<body>
 <div class="big-screen">
  <ul class="pic-list clearfix">
   <li>
    <a href="javascript:;">
     <img src="http://fed.yhd.cn:9000/1920x400/27ae60xfff" alt="picture" width="1920" height="400"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="http://fed.yhd.cn:9000/1920x400/ae273axfff" alt="picture" width="1920" height="400"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="http://fed.yhd.cn:9000/1920x400/2757aexfff" alt="picture" width="1920" height="400"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff" alt="picture" width="1920" height="400"/>
    </a>
   </li>
  </ul>
 </div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ul=$('.pic-list'),
   li=ul.find('li'),
   liW=li.outerWidth(true),
   liLen=li.length,
   index=0,
   autoPlay;
  li.first().clone().appendTo(ul);
  ul.css({'width':liW*(liLen+1),'margin-left':-liW*index});
  function play(){
   if(!ul.is('animated')){
    ul.stop().animate({
     'margin-left':-liW*index
    },480,function(){
     if(index>liLen){
      index=0;
      ul.css({'margin-left':-liW*index});
      index++;
     }
    });
   }
  }
  $('.big-screen').hover(function(){
   clearInterval(autoPlay);
  },function(){
   autoPlay=setInterval(function(){
    play();
    index++;
   },500)
  }).trigger('mouseleave');

})
</script>
</html> 

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.