Bagaimana untuk melaksanakan komponen gelongsor gambar dengan bar skrol dalam jquery

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas yang memudahkan kerumitan pengaturcaraan JavaScript. Bar skrol ialah elemen biasa pada tapak web Anda boleh melaksanakan komponen gelongsor gambar dengan bar skrol dengan menggunakan jQuery Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi ini.

Pertama, kita perlu memperkenalkan perpustakaan jQuery. Anda boleh memuat turun versi terkini pustaka dari tapak web rasmi jQuery, atau gunakan pautan CDN (Rangkaian Penghantaran Kandungan). Di sini kami menggunakan pautan CDN untuk memuatkan perpustakaan jQuery:

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

Seterusnya, kami memerlukan beberapa gaya untuk menentukan gaya bar skrol. Di sini kami menggunakan CSS untuk menentukan gaya untuk bar skrol. Perlu diingatkan bahawa beberapa nama kelas yang akan disebut kemudian dalam artikel ini digunakan di sini Jika anda ingin menukar nama kelas ini, anda perlu menukar kod yang sepadan pada masa yang sama.

.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;
}

Seterusnya, kita memerlukan struktur HTML untuk menentukan kawasan imej, kawasan bar skrol dan peluncur.

<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>

Dalam kod di atas, kami menggunakan nama kelas "scroll-box" untuk mentakrifkan bekas yang mengandungi gambar dan bar skrol, gunakan nama kelas "scroll-content" untuk menentukan kawasan gambar dan gunakan " Gunakan nama kelas "scroll-bar" untuk menentukan kawasan bar skrol, dan gunakan nama kelas "thumb" untuk mentakrifkan slider.

Seterusnya, kami memerlukan beberapa kod JavaScript untuk menatal imej. Sebelum melakukan ini, kita perlu menentukan lebar untuk setiap imej untuk mengira jarak yang diperlukan untuk menatal. Di sini kami menetapkan lebar imej kepada 300 piksel:

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

Sekarang, kita boleh mula menulis kod JavaScript. Pertama, kita perlu mengira ketinggian gelangsar. Ketinggian akan dikira berdasarkan nisbah ketinggian bekas imej kepada ketinggian kawasan kandungan. Kami menetapkan ketinggian peluncur kepada 80 piksel (boleh berubah jika perlu):

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);

Seterusnya, kami perlu mengikat acara seret peluncur sebagai tindak balas kepada penatalan pengguna. Semasa pengguna menyeret peluncur, kami mengalihkan kawasan kandungan imej ke atas atau ke bawah dan mengemas kini kedudukan peluncur.

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;
});

Dalam kod di atas, kami mengikat tetikus ke bawah, pergerakan tetikus dan peristiwa tetikus ke atas. Apabila tetikus ditekan, kami menetapkan pembolehubah "is_drag" kepada benar, menunjukkan bahawa pengguna menyeret peluncur dan menyimpan kedudukan tetikus dan kedudukan peluncur semasa. Apabila tetikus bergerak, kami mengira kedudukan baharu peluncur dan kedudukan baharu kawasan kandungan imej berdasarkan jarak pergerakan tetikus, dan kemudian mengemas kini kedudukan peluncur dan kawasan kandungan imej. Akhir sekali, apabila tetikus diangkat, kami menetapkan pembolehubah "is_drag" kepada palsu, menunjukkan bahawa pengguna telah berhenti menyeret.

Kini, kami telah melaksanakan komponen bar skrol imej jQuery. Komponen ini membolehkan pengguna menatal imej dengan mudah menggunakan peluncur, meningkatkan pengalaman dan kebolehgunaan pengguna dengan sangat baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen gelongsor gambar dengan bar skrol dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!