Implementieren Sie Karusselleffekte basierend auf jquery_jquery

Karussell ist der zweite dynamische Effekt, der beim Erlernen von JQuery implementiert wird, und es ist auch derjenige, dessen Erlernen am längsten dauert. Bei der Implementierung des Karussells stoßen wir immer auf verschiedene Probleme. Ich habe viele Leute konsultiert und viele Male gefragt. Heute wage ich nicht zu behaupten, dass ich sofort ein Karussell schreiben kann.

Ich hoffe, einige Denkprozesse durch Aufsätze festhalten zu können.

Die erste ist die HTML-Struktur, ein einfaches Karussell, ein nahtloses Karussell aus einzelnen Bildern, das hauptsächlich in drei Ebenen unterteilt ist: div>ul>li und das IMG-Bild in 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, Floating 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 Methoden 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 natürlich zum ersten Bild übergehen? Stück nach dem letzten ist in Ordnung. Daher müssen wir das erste Stück klonen und es 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 besteht der nächste Schritt darin, 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 gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.