jQuery-Bildwechsel-Animationseffekte

Idee: Ich glaube, jeder hat Taobao oder andere Websites besucht und es gibt normalerweise einen Bildanimationswechseleffekt. Da ich als Blogger nicht besonders gut bin, habe ich ein einfaches Beispiel erstellt!

Zuallererst gibt es normalerweise zwei Bildschaltflächen auf dem Bild, eine linke Umschalttaste und eine rechte Umschaltschaltfläche. Wenn wir auf die linke Umschaltschaltfläche klicken, wird das Originalbild um XX Pixel nach rechts verschoben dann wird das Bild links im Feld angezeigt und das Originalbild ausgeblendet. Das Prinzip des Klickens auf die rechte Schaltfläche ähnelt dem der linken Schaltfläche. Wenn Sie jedoch immer wieder auf die gleiche Schaltfläche klicken und die Bildumschaltbox ursprünglich nur 3 Bilder enthält, müssen wir entscheiden, wann das letzte Bild erreicht ist, und es wieder auf das erste oder letzte Bild verschieben. Nachdem wir die Ideen analysiert haben, werfen wir einen Blick auf unseren Code:

1. HTML-Code

<div id="divBox">
  <div id="imgBox">
    <div class="img"><img  src="/static/imghw/default1.png"  data-src="0.jpg"  class="lazy"  / alt="jQuery-Bildwechsel-Animationseffekte" ></div>
    <div class="img"><img  src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"  / alt="jQuery-Bildwechsel-Animationseffekte" ></div>
    <div class="img"><img  src="/static/imghw/default1.png"  data-src="3.jpg"  class="lazy"  / alt="jQuery-Bildwechsel-Animationseffekte" ></div>
  </div>
</div>
<div id="bth">
  <button id="zou">左</button>
  <button id="you">右</button>
</div>

divBox ist eine Box, die angezeigt wird Bilder

imgBox ist ein DIV, das alle Bilder umschließt. Um den Effekt zu erzielen, müssen wir nur dieses DIV verschieben.

bth platziert zwei Schaltflächen zum Wechseln von Bildern

2 . CSS-Code

#divBox{
height:315px;
width:750px;
position:absolute;
border:#000000 1px solid;
overflow:hidden;}
 
#imgBox{
position:absolute;
width:2550px;}
 
.img{
float:left;}
 
#bth{
margin-left:800px;}

#divBox legt die Breite, Höhe, absolute Position und den Rand des Bildanzeigefelds fest ausgeblendet, wenn dies der Fall ist Wenn der Inhalt in einem DIV die Größe dieses DIV überschreitet, wird der Überlaufteil ausgeblendet.

#imgBox Legen Sie die absolute Position und Breite fest. Diese Breite hängt von der Summe aller Ihrer Bilder ab. Es gibt drei Bilder, wenn die Breite nicht beträgt Hier angegeben, kann der kleine innerhalb von DIV nicht nach links schweben.

.img ist so eingestellt, dass es nach links schwebt, sodass alle Bilder nach links schweben und auf einer horizontalen Linie bleiben.

#bth Legen Sie die Ränder fest. Da das Div oben eine absolute Position hat, wird das Div verdeckt und unsichtbar, also verschieben Sie das Div nach außen.

3. Skriptcode

$(function(){
  //定义一个变量保存距离左边的位置
  var leftNum=0;
  $("#zou").click(function(){
    if(leftNum==0){
      //移动到最后一张图片
      $("#imgBox").animate({left:leftNum=-1500},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum+750},500);
    }
     
  });
   
  $("#you").click(function(){
    if(leftNum==-1500){
      //移动到第一张图片
      $("#imgBox").animate({left:leftNum=0},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum-750},500);
    }
     
  });
});

Tipp: Denken Sie daran, das jQuery-Paket zu importieren

Ich habe zwei Skriptcodes geschrieben Das Click-Ereignis definiert ein Attribut leftNum

, das den Abstand nach links speichert. Schauen wir uns zunächst unser Click-Ereignis für die linke Schaltertaste an: Wenn wir auf die Schaltfläche klicken, stellen wir zunächst fest, ob leftNum 0 ist ist 0. Was soll ich tun, wenn auf der linken Seite des ersten Bildes kein Bild vorhanden ist? Wir rufen hier die Animationsmethode auf Ich schreibe links: links=-1500. Warum ist es -1500? Wenn links gleich 0 ist, ist es das erste Bild, wenn links gleich -750 ist, ist es das zweite Bild, wenn links gleich -1500 ist. es ist das dritte Bild, also ist die Position des letzten Bildes = - (Bildbreite)X(Gesamtzahl der Bilder)-1. Wenn leftNum nicht 0 ist, addieren wir 750 Pixel zum ursprünglichen Wert.

Das Prinzip der rechten Schalttaste ähnelt dem der linken Schalttaste, daher werde ich nicht so viel erklären.

4. Zusammenfassung:

Freunde, die es verstehen, können es selbst üben, schließlich wird Übung die Wahrheit ans Licht bringen.

Wenn Sie einen schöneren Schüler machen möchten, können Sie mir eine private Nachricht senden. Schließlich gibt es noch Funktionen, die ich noch nicht erwähnt habe, z. B. das Setzen einiger Punkte auf dem Bild Wir klicken auf die Punkte, die Animation wechselt zur entsprechenden. Auf den Bildern können Sie auch den Bildkarusselleffekt einstellen und alle paar Sekunden zwischen den Bildern wechseln.

Was die Schaltflächen betrifft, können Sie sie auch schöner gestalten. Sie können links und rechts vom Bild eine Bildschaltfläche hinzufügen, die es schöner macht