Ausführliche Erläuterung der Schritte zur Implementierung eines nahtlosen Karussells sowie von Links- und Rechtsklicks mit jQuery

Dieses Mal werde ich Ihnen die Schritte zum Implementieren eines nahtlosen Karussells und von Links- und Rechtsklicks mit jQuery ausführlich erläutern sind praktische Fälle. Es gibt viele nahtlose Karussell-Links- und Rechtsschleifen, die wir in Webseiten haben möchten, und es ist auch der einfachste, den ich mit Ihnen teilen möchte Ich hoffe, Sie können daraus lernen. Ich möchte, dass Sie mich beschimpfen und mir Ihre wertvollen Meinungen mitteilen.

Das ist der Effekt, den ich möchte

Kommen wir zum Punkt. Das Prinzip des Layouts besteht darin, das ul-Tag in p zu erstellen und fügen Sie das li-Tag in ul ein. Fügen Sie Bilder ein. Wenn Sie mehrere Bilder drehen möchten, fügen Sie mehrere li ein. Der Hauptpunkt im Layout besteht darin, die Größe von p festzulegen und

overflow

hinzuzufügen: versteckt; um den überschüssigen Teil auszublenden, ist die Länge von ul die Gesamtlänge aller Bilder und li ist schwebend.

<p id="djlb">
        <p id="bigul">
          <ul>
            <li>
              <img src="../images/djlb1.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb3.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
        </p>
      </p>
      <p id="aniu">
        <p id="bleft"></p>
        <p id="bright"></p>
      </p>  
    </p>

Sie Wenn Sie auf die rechte Seite klicken, wird das erste in das dritte Bild kopiert, denn wenn Sie das erste in das nächste verschieben, ist die linke Seite des übergeordneten UL-Felds 0, und wenn Sie es das nächste Mal verschieben, Es vervollständigt seine Position automatisch, das heißt, es gibt zwei Positionen, also ist es das dritte Bild, das ich nur durch Zeichnen des Bildes herausgefunden habe, hehe!

Die ganze Idee:

Verwenden Sie animieren, um li in Bewegung zu setzen.

Wenn Sie nach rechts klicken, verwenden Sie die append()-Methode Füge die erste Karte zur letzten Karte hinzu und lösche sie jedes Mal, wenn du sie verschiebst.

Wenn Sie nach links klicken, fügen Sie mit insertBefore() das letzte Bild in das erste Bild ein und löschen Sie es auch. Häkchen ist der von uns definierte Timer settimeout

Der letzte Satz Es handelt sich um ein automatisches Rechtsereignis

Mausbewegungen zum Ein- und Ausblenden erfolgen mit Mouseout() und Show(), hide() ist in Ordnung

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Der Fall in diesem Artikel finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Knoten erstellt Server, schreibt Schnittstellen, passt Schnittstellen an und erläutert ausführlich domänenübergreifende Methoden

Beheben von Knotenänderungen. Umgang mit häufigen manuellen Neustarts

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zur Implementierung eines nahtlosen Karussells sowie von Links- und Rechtsklicks mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!