So implementieren Sie eine Bildschiebekomponente mit Bildlaufleiste in JQuery

jQuery ist eine weit verbreitete JavaScript-Bibliothek, die die Komplexität der JavaScript-Programmierung vereinfacht. Bildlaufleisten sind gängige Elemente auf Websites. Mithilfe von jQuery können Sie ganz einfach eine Bildlaufkomponente implementieren. In diesem Artikel stellen wir vor, wie Sie diese Funktion mit jQuery implementieren.

Zuerst müssen wir die jQuery-Bibliothek vorstellen. Sie können die neueste Version der Bibliotheksdatei von der offiziellen Website von jQuery herunterladen oder einen CDN-Link (Content Delivery Network) verwenden. Hier verwenden wir den CDN-Link, um die jQuery-Bibliothek zu laden:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Als nächstes benötigen wir einige Stile, um den Stil der Bildlaufleiste zu definieren. Hier verwenden wir CSS, um den Stil für die Bildlaufleiste zu definieren. Es ist zu beachten, dass hier einige Klassennamen verwendet werden, die später in diesem Artikel erwähnt werden. Wenn Sie diese Klassennamen ändern möchten, müssen Sie gleichzeitig den entsprechenden Code ändern.

.scroll-box {
  overflow: hidden; /* 隐藏滚动条 */
  position: relative;
}

.scroll-box .scroll-content {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.scroll-box .scroll-bar {
  background-color: #ccc;
  border-radius: 10px;
  cursor: pointer;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  z-index: 1;
}

.scroll-box .scroll-bar .thumb {
  background-color: #999;
  border-radius: 5px;
  height: 50px;
  left: -10px;
  position: absolute;
  top: 0;
  width: 28px;
}

Als nächstes benötigen wir die HTML-Struktur, um den Bildbereich, den Bildlaufleistenbereich und den Schieberegler zu definieren.

<div class="scroll-box">
  <div class="scroll-content">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
    <img src="image6.jpg" alt="Image 6">
    <img src="image7.jpg" alt="Image 7">
    <img src="image8.jpg" alt="Image 8">
  </div>
  <div class="scroll-bar">
    <div class="thumb"></div>
  </div>
</div>

Im obigen Code verwenden wir den Klassennamen „scroll-box“, um den Container mit Bildern und Bildlaufleisten zu definieren, verwenden den Klassennamen „scroll-content“, um den Bildbereich zu definieren, und use " Verwenden Sie den Klassennamen „scroll-bar“, um den Bildlaufleistenbereich zu definieren, und verwenden Sie den Klassennamen „thumb“, um den Schieberegler zu definieren.

Als nächstes benötigen wir etwas JavaScript-Code, um das Scrollen des Bildes zu implementieren. Zuvor müssen wir für jedes Bild eine Breite definieren, um die zum Scrollen erforderliche Entfernung zu berechnen. Hier stellen wir die Breite des Bildes auf 300 Pixel ein:

.scroll-box .scroll-content img {
  display: inline-block;
  width: 300px;
}

Jetzt können wir mit dem Schreiben von JavaScript-Code beginnen. Zuerst müssen wir die Höhe des Schiebereglers berechnen. Die Höhe wird anhand des Verhältnisses der Höhe des Bildcontainers zur Höhe des Inhaltsbereichs berechnet. Wir stellen die Höhe des Schiebereglers auf 80 Pixel ein (kann sich bei Bedarf ändern):

var content_height = $('.scroll-content').height();
var container_height = $('.scroll-box').height();
var thumb_height = container_height / content_height * container_height;
$('.thumb').css('height', thumb_height);

Als nächstes müssen wir das Ziehereignis des Schiebereglers als Reaktion auf das Scrollen des Benutzers binden. Wenn der Benutzer den Schieberegler zieht, verschieben wir den Bildinhaltsbereich nach oben oder unten und aktualisieren die Position des Schiebereglers.

var is_drag = false;
var start_y = 0;
var start_top = 0;
$('.thumb').mousedown(function(e) {
  is_drag = true;
  start_y = e.pageY;
  start_top = parseInt($(this).css('top'));
});

$(document).mousemove(function(e) {
  if (is_drag) {
    var diff = e.pageY - start_y;
    var thumb_top = start_top + diff;
    var max_top = container_height - thumb_height;
    if (thumb_top < 0) {
      thumb_top = 0;
    }
    if (thumb_top > max_top) {
      thumb_top = max_top;
    }
    var scroll_top = thumb_top / max_top * (content_height - container_height);
    $('.scroll-content').css('top', -scroll_top);
    $('.thumb').css('top', thumb_top);
  }
});

$(document).mouseup(function() {
  is_drag = false;
});

Im obigen Code binden wir die Ereignisse „Maus nach unten“, „Maus bewegen“ und „Maus nach oben“. Wenn die Maus gedrückt wird, setzen wir die Variable „is_drag“ auf true, um anzuzeigen, dass der Benutzer den Schieberegler zieht, und speichern die aktuelle Mausposition und Schiebereglerposition. Wenn sich die Maus bewegt, berechnen wir die neue Position des Schiebereglers und die neue Position des Bildinhaltsbereichs basierend auf der Mausbewegungsentfernung und aktualisieren dann die Positionen des Schiebereglers und des Bildinhaltsbereichs. Wenn schließlich die Maus angehoben wird, setzen wir die Variable „is_drag“ auf „false“, um anzuzeigen, dass der Benutzer mit dem Ziehen aufgehört hat.

Jetzt haben wir eine jQuery-Bildlaufleistenkomponente implementiert. Mit dieser Komponente können Benutzer mithilfe eines Schiebereglers einfach durch Bilder scrollen, was die Benutzererfahrung und Benutzerfreundlichkeit erheblich verbessert.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Bildschiebekomponente mit Bildlaufleiste in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!