jQueryでスライディングLUNを実装する

モバイル デバイスとスライディング カルーセルの人気に伴い、jQuery を使用してスライディング カルーセルを実装することは、フロントエンド開発で避けられないタスクの 1 つになりました。この記事ではjQueryを使ってスライディングカルーセルを実装する方法を紹介しますので、フロントエンド開発の参考になれば幸いです。

1. HTML 構造

まず、基本的な HTML 構造を構築する必要があります。この例では、画像をラップするコンテナと、ナビゲーション ポイントを含むコンテナが必要です。コードは次のとおりです:

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="jQueryでスライディングLUNを実装する" ></li>
    <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="jQueryでスライディングLUNを実装する" ></li>
    <li class="slider-item"><img  src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="jQueryでスライディングLUNを実装する" ></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 スタイル

次に、カルーセル画像の CSS スタイルを設定する必要があります。まず、画像を含むコンテナの幅と高さを設定し、コンテナのオーバーフロー部分を非表示にする必要があります。コードは次のとおりです。

.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一致 */
}

次に、ナビゲーション ポイントの CSS スタイルを設定する必要があります。コードは次のとおりです:

.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 コード

最後に、jQuery を使用してカルーセル チャートを実装する必要があります。まず、現在のカルーセル画像のインデックス (index)、画像を含むコンテナ ($wrapper)、ナビゲーション ポイント コンテナ ($nav)、ナビゲーション ポイント ($navItems)、番号などの変数を定義する必要があります。カルーセル画像の数 (imgCount )。コードは次のとおりです。

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;

次に、カルーセル画像を自動的に再生する関数を定義する必要があります。この関数の実装方法は、現在のカルーセル画像のインデックスを継続的に更新し、画像を含むコンテナを対応する距離だけ移動させることです。コードは次のとおりです。

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

最後に、カルーセルが特定の間隔内で自動的に再生できるようにタイマーを定義する必要があります。コードは次のとおりです。

var intervalId = setInterval(autoplay, 3000);

ユーザーがナビゲーション ポイントをクリックすると、タイマーをキャンセルする必要があり、カルーセル チャートが対応する位置にジャンプします。コードは次のとおりです:

$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. 概要

jQuery を使用してスライディング カルーセル チャートを実装する場合は、次の点に注意する必要があります。 #HTML 構造には、画像とナビゲーション ポイントのすべてのカルーセル コンテナーと、画像とナビゲーション ポイントの HTML 要素が含まれている必要があります。

CSS スタイルでは、画像を含むコンテナの幅と高さを設定し、コンテナのオーバーフロー部分を非表示にする必要があります。
1. カルーセル画像のインデックス、画像を含むコンテナ、ナビゲーション ポイント コンテナ、ナビゲーション ポイントの数、カルーセル画像などの変数を定義する必要があります。
2. 自動再生カルーセル機能は、画像を含むコンテナが対応する距離だけ移動するように、現在のカルーセルのインデックスを継続的に更新する必要があります。
3. カルーセルが一定の間隔内で自動的に再生されるようにするには、タイマーを使用する必要があります。
4. ユーザーがナビゲーション ポイントをクリックした場合、タイマーをキャンセルする必要があり、カルーセル チャートが対応する位置にジャンプします。

以上がjQueryでスライディングLUNを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。