JQuery-Karusselleffekt-Implementierungsprozess Analyse_JQuery

Karussell ist die zweite Animation, die beim Erlernen von JQuery implementiert wird, und es ist auch diejenige, deren Erlernen am längsten dauert. Bei der Implementierung des Karussells stoßen wir immer auf verschiedene Probleme. Ich habe viele Leute konsultiert und Guan Niang gefragt. Heute wage ich nicht zu behaupten, dass ich sofort ein Karussell schreiben kann. Ich hoffe, einige meiner Denkprozesse durch Essays festhalten zu können.

Die erste ist die HTML-Struktur, ein einfaches Karussell, ein nahtloses Karussell aus einem einzelnen Bild, das hauptsächlich in drei Ebenen unterteilt ist: div>ul>li und das IMG-Bild innerhalb des Li.

Zweitens, CSS-Stil: div feste Breite und Höhe, Überlauf: versteckt; es wird empfohlen, die Breite von ul dynamisch zu erhalten (im nächsten Schritt geht es darum, wie man sie erhält); in Bezug auf li bin ich es gewohnt, Floats zu verwenden , damit sie in der richtigen Reihenfolge auf der UL angeordnet werden können. Denken Sie daran, den Float zu löschen (clear: beide).

Das Wichtigste ist die JQuery-Methode. Die wichtigsten sind animate(), setInterval() und hover(). Bevor wir die Methode schreiben, klären wir die Logik des dynamischen Effekts: Die Bilder gleiten in einer Schleife von rechts nach links. Wenn das letzte Bild verschoben wird, wird das erste Bild angezeigt und so weiter.

1. Ermitteln Sie die Anzahl der Li-Längen und -Breiten

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

Da es sich um ein nahtloses Karussell handelt, müssen wir etwas tun, um einen natürlichen Übergang zu erreichen. Wenn das Bild zum letzten Bild gleitet, wie können wir zu diesem Zeitpunkt einen natürlichen Übergang zum ersten Bild schaffen? Nur ein Stück nach dem letzten ist in Ordnung. Daher müssen wir das erste Stück klonen und an das Ende von li anhängen

$('li:first').clone().appendTo('ul')
2. Ermitteln Sie die Breite von ul: Die Breite von ul ist gleich der Breite aller Li plus der Breite des geklonten Li

ulWidth=liWidth*(len+1)
Es scheint, dass die Vorbereitungen abgeschlossen sind, also versuchen wir als nächstes, ihn in Bewegung zu setzen. Das erste, was mir in den Sinn kommt, ist die animate()-Methode:

animate( Eigenschaften [, Dauer ] [, Lockerung ] [, vollständig ] ),

Die ersten Parametereigenschaften: CSS-Attribute und Wertobjekte, die den Effekt der Animation bestimmen, ob nach oben und unten oder nach links und rechts

Der zweite Parameter Dauer: die Zeit zum Abschließen einer Animation, der Standardwert ist 400, die Einheit ist Millisekunden;

Der dritte Parameterbeschleunigung: Die Beschleunigungsfunktion, die für den Animationsübergang verwendet wird. Der Standardwert ist Swing (linear, Swing). Dieser Parameter wird im Allgemeinen nicht verwendet

Der vierte Parameter abgeschlossen: bezieht sich auf den Vorgang, der nach Abschluss der Animation ausgeführt wird.

Unsere Animation erfolgt von rechts nach links, daher können wir dies erreichen, indem wir den Rand-Links-Wert von ul ändern

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

Der Index bezieht sich auf den Indexwert von li. Wenn der Indexwert von li gleich dem Längenwert von li ist, dh die Animation bis zum letzten Bild ausgeführt wurde, wird der linke Rand von ul direkt festgelegt auf 0 und der Indexwert von li Auch 0.

Darin liegt noch eine weitere versteckte Gefahr, die ich vorerst nicht erwähnen werde.

Im nächsten Schritt wird das Bild automatisch abgespielt, wenn die Maus das Div verlässt. Hierzu werden hover() und setInterval()

verwendet

setInterval() wird vom W3C wie folgt erklärt: Rufen Sie eine Funktion auf oder berechnen Sie einen Ausdruck gemäß dem angegebenen Zeitraum (in Millisekunden). Die Funktion wird kontinuierlich aufgerufen, bis clearInterval() aufgerufen oder das Fenster geschlossen wird.

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

Auf diese Weise scheint eine automatische Wiedergabefunktion implementiert zu sein, aber wir können auch einen Fehler finden. Der erste Frame scheint etwas lange zu bleiben.

Dieses Problem wurde gestern gelöst. Wenn das letzte Bild ausgeführt wird, ändert sich sein Index sofort auf 0, und dann wird es zweimal ausgeführt. Daher müssen wir es in diesem Urteil zulassen, wenn der Index 0 ist , index++ und unter die Beurteilungsbedingung stellen.

Es gibt ein weiteres Problem, das ich gestern entdeckt habe. Es gibt zwei Zeiten in diesem Karussell, eines ist die Ausführungszeit der Animation und das andere ist die Wiedergabezeit. Der Grund dafür ist dass js Die Ausführungsreihenfolge ist von oben nach unten oder die letzte Zeit ist kleiner als die erstere, dann kann die Animation innerhalb dieses Zeitunterschieds nicht in die Beurteilungsbedingungen eintreten und wird weiter abgespielt Karussell wird scheitern. Das war’s für heute, wenn ich es das nächste Mal teile, füge ich einen Karusselleffekt aus linken und rechten Pfeilen und schwebenden Punkten hinzu.

Im Anhang finden Sie den vollständigen Code:

<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>  

Das Obige ist der vollständige Code des JQuery-Karusselleffekts, der mit Ihnen geteilt wird. Ich hoffe, er wird Ihnen beim Lernen helfen.