Processus de mise en œuvre de l'effet carrousel Jquery Analysis

Processus de mise en œuvre de l'effet carrousel Jquery Analysis_jquery

WBOY

Libérer： 2016-05-16 15:07:35

original

1238 Les gens l'ont consulté

Carousel est la deuxième animation implémentée lors de l'apprentissage de jquery, et c'est aussi celle 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 interrogé Guan Niang à 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 de mes processus de réflexion à travers des essais.

La première est la structure HTML, un simple carrousel, un carrousel transparent d'une seule image, principalement divisée en trois couches : div>ul>li et l'image img à l'intérieur du 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, je suis habitué à utiliser des flotteurs) ; , 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,

Copier après la connexion

Comme 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 image, comment pouvons-nous faire une transition naturelle vers la première image à ce moment-là, s'il s'agit de la troisième image ? Juste un 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, alors nous essayons ensuite de le faire bouger. La première chose qui nous 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'})
  } 
})

Copier après la connexion

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');

Copier après la connexion

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>

Copier après la connexion

Ce qui précède est le code complet de l'effet carrousel jquery partagé avec vous. J'espère qu'il vous sera utile pour votre apprentissage.