Implementieren Sie Sliding Lun mit jQuery

Mit der Beliebtheit mobiler Geräte und der Beliebtheit von Schiebekarussells ist die Verwendung von jQuery zur Implementierung von Schiebekarussells zu einer der unvermeidlichen Aufgaben der Front-End-Entwicklung geworden. In diesem Artikel erfahren Sie, wie Sie mit jQuery ein Schiebekarussell implementieren. Ich hoffe, dass er für Ihre Front-End-Entwicklung hilfreich ist.

1. HTML-Struktur

Zuerst müssen wir die grundlegende HTML-Struktur erstellen. In diesem Beispiel benötigen wir einen Container, der das Bild umschließt, und einen Container, der den Navigationspunkt enthält. Der Code lautet wie folgt:

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img src="image1.jpg"></li>
    <li class="slider-item"><img src="image2.jpg"></li>
    <li class="slider-item"><img src="image3.jpg"></li>
    <!-- 更多图片 -->
  </ul>
  <ul class="slider-nav">
    <li class="slider-nav-item active"></li><!-- 第一个导航点默认选中 -->
    <li class="slider-nav-item"></li>
    <li class="slider-nav-item"></li>
    <!-- 更多导航点 -->
  </ul>
</div>

2. CSS-Stil

Als nächstes müssen wir den CSS-Stil für das Karussellbild festlegen. Zuerst müssen wir die Breite und Höhe des Containers festlegen, der das Bild enthält, und den Überlaufteil des Containers ausblenden. Der Code lautet wie folgt:

.slider {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.slider-wrapper {
  position: relative;
  width: 300%;
  height: 400px; /* 需要与.slider一致 */
  left: 0;
}
.slider-item {
  position: relative;
  float: left;
  width: 33.3333%;
  height: 400px; /* 需要与.slider一致 */
}

Als nächstes müssen wir den CSS-Stil für den Navigationspunkt festlegen. Der Code lautet wie folgt:

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}
.slider-nav-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.slider-nav-item.active {
  background-color: #f00;
}

3. JavaScript-Code

Schließlich müssen wir jQuery verwenden, um das Karusselldiagramm zu implementieren. Zuerst müssen wir einige Variablen definieren, darunter den Index des aktuellen Karussellbilds (index), den Container, der das Bild enthält ($wrapper), den Navigationspunktcontainer ($nav), den Navigationspunkt ($navItems) und die Nummer von Karussellbildern (imgCount ). Der Code lautet wie folgt:

var index = 0;
var $wrapper = $('.slider-wrapper');
var $nav = $('.slider-nav');
var $navItems = $nav.find('.slider-nav-item');
var imgCount = $wrapper.find('.slider-item').length;

Als nächstes müssen wir eine Funktion definieren, um das Karussellbild automatisch abzuspielen. Die Implementierungsmethode dieser Funktion besteht darin, den Index des aktuellen Karussellbilds kontinuierlich zu aktualisieren und den Container, der das Bild enthält, um die entsprechende Distanz bewegen zu lassen. Der Code lautet wie folgt:

function autoplay() {
  index++;
  if (index >= imgCount) {
    index = 0;
  }
  $wrapper.animate({
    left: '-' + (index * 100) + '%'
  }, 500);
  $navItems.eq(index).addClass('active').siblings().removeClass('active');
}

Zuletzt müssen wir einen Timer definieren, damit das Karussell innerhalb eines bestimmten Intervalls automatisch abgespielt werden kann. Der Code lautet wie folgt:

var intervalId = setInterval(autoplay, 3000);

Wenn der Benutzer auf den Navigationspunkt klickt, muss der Timer abgebrochen werden und das Karusselldiagramm springt an die entsprechende Position. Der Code lautet wie folgt:

$navItems.on('click', function() {
  clearInterval(intervalId);
  index = $(this).index();
  $wrapper.animate({
    left: '-' + (index * 100) + '%'
  }, 500);
  $navItems.eq(index).addClass('active').siblings().removeClass('active');
  intervalId = setInterval(autoplay, 3000);
});

4. Zusammenfassung

Wenn Sie jQuery zum Implementieren eines Schiebekarussells verwenden, müssen Sie die folgenden Punkte beachten:

1. Die HTML-Struktur muss Container für alle Karussells und Navigationspunkte enthalten sowie das HTML-Element für Bilder und Navigationspunkte.
2. CSS-Stile müssen die Breite und Höhe des Containers festlegen, der das Bild enthält, und den überlaufenden Teil des Containers ausblenden.
3. Sie müssen Variablen wie den Index des Karussellbilds, den Container, der das Bild enthält, den Navigationspunktcontainer, die Anzahl der Navigationspunkte und das Karussellbild definieren.
4. Die automatische Wiedergabekarussellfunktion muss den Index des aktuellen Karussells kontinuierlich aktualisieren, damit sich der Container, der das Bild enthält, um die entsprechende Distanz bewegt.
5. Sie müssen einen Timer verwenden, damit das Karussell innerhalb eines bestimmten Intervalls automatisch abgespielt wird.
6. Wenn der Benutzer auf den Navigationspunkt klickt, muss der Timer abgebrochen werden und das Karusselldiagramm springt an die entsprechende Position.

Das obige ist der detaillierte Inhalt vonImplementieren Sie Sliding Lun mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!