jqueryでスクロールバー付きの画像スライドコンポーネントを実装する方法

jQuery は、複雑な JavaScript プログラミングを簡素化する、広く使用されている JavaScript ライブラリです。 Webサイトではよく使われるスクロールバーですが、jQueryを使うとスクロールバー付きの画像スライドコンポーネントを簡単に実装することができますので、今回はjQueryを使ってこの機能を実装する方法を紹介します。

まず、jQuery ライブラリを導入する必要があります。 jQuery の公式 Web サイトからライブラリ ファイルの最新バージョンをダウンロードするか、CDN (コンテンツ配信ネットワーク) リンクを使用できます。ここでは、CDN リンクを使用して jQuery ライブラリをロードします。

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

次に、スクロール バーのスタイルを定義するためにいくつかのスタイルが必要です。ここでは CSS を使用してスクロール バーのスタイルを定義します。なお、ここでは後述する一部のクラス名を使用していますが、これらのクラス名を変更したい場合は、対応するコードも同時に変更する必要があります。

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

次に、画像領域、スクロール バー領域、スライダーを定義する HTML 構造が必要です。

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

上記のコードでは、「scroll-box」クラス名を使用して画像とスクロール バーを含むコンテナを定義し、「scroll-content」クラス名を使用して画像領域を定義し、「 「scroll-bar」クラス名を使用してスクロール バー領域を定義し、「thumb」クラス名を使用してスライダーを定義します。

次に、画像のスクロールを実装するための JavaScript コードが必要です。これを行う前に、スクロールに必要な距離を計算するために各画像の幅を定義する必要があります。ここでは、画像の幅を 300 ピクセルに設定します。

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

これで、JavaScript コードの記述を開始できます。まず、スライダーの高さを計算する必要があります。高さは、イメージ コンテナーの高さとコンテンツ領域の高さの比率に基づいて計算されます。スライダーの高さを 80 ピクセルに設定します (必要に応じて変更できます):

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

次に、ユーザーのスクロールに応じてスライダーのドラッグ イベントをバインドする必要があります。ユーザーがスライダーをドラッグすると、画像コンテンツ領域が上下に移動し、スライダーの位置が更新されます。

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

上記のコードでは、マウスを押す、マウスを動かす、およびマウスを持ち上げるイベントをバインドします。マウスが押されると、「is_drag」変数を true に設定して、ユーザーがスライダーをドラッグしていることを示し、現在のマウス位置とスライダーの位置を保存します。マウスが移動すると、マウスの移動距離に基づいてスライダーの新しい位置と画像コンテンツ領域の新しい位置が計算され、スライダーと画像コンテンツ領域の位置が更新されます。最後に、マウスを離したときに、「is_drag」変数を false に設定し、ユーザーがドラッグを停止したことを示します。

これで、jQuery 画像スクロール バー コンポーネントが実装されました。このコンポーネントにより、ユーザーはスライダーを使用して画像を簡単にスクロールできるようになり、ユーザー エクスペリエンスと使いやすさが大幅に向上します。

以上がjqueryでスクロールバー付きの画像スライドコンポーネントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。