So verwenden Sie jQuery, um ein nahtloses Karussell sowie Links- und Rechtsklicks zu erzielen

Dieses Mal zeige ich Ihnen, wie Sie mit jQuery ein nahtloses Karussell und Links- und Rechtsklicks erreichen Werfen wir einen Blick darauf. 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,

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:

So verwenden Sie die asynchrone Funktion in js

So optimieren Sie die asynchrone Funktion von js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery, um ein nahtloses Karussell sowie Links- und Rechtsklicks zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!