JavaScriptカルーセル画像JSの書き方

JavaScript カルーセル チャートの実装では、ネイティブ JavaScript コードを使用することも、成熟したサードパーティ ライブラリ (jQuery など) を参照することもできます。

ネイティブ JavaScript コードを例として、JavaScript カルーセル チャートの実装方法を紹介します。

ステップ 1: HTML 構造

まず、画像コンテナ、左右の矢印、ナビゲーション ボタンなどを含むカルーセルの構造を HTML で定義する必要があります。例:

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-prev"></div>
  <div class="slider-next"></div>
  <div class="slider-dots">
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
  </div>
</div>

このうち、slider-container はカルーセル画像のコンテナ、slider-wrapper は画像コンテナ、slider-prev と slider-next は左右の矢印、slider-dots と slider-dot はナビゲーション ボタンです。

ステップ 2: CSS スタイル

次に、コンテナの幅、高さ、位置など、コンテナのレイアウトとサイズなど、カルーセル画像のスタイルを設定する必要があります。画像など、ナビゲーションボタンのスタイルなど。

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  width: 2400px;
  height: 400px;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  float: left;
  width: 800px;
  height: 400px;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  cursor: pointer;
}

.slider-prev {
  left: 20px;
  transform: rotate(180deg);
}

.slider-next {
  right: 20px;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dot {
  display: inline-block;
  margin: 0 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #f90;
}

上記はいくつかの簡単なスタイルの例ですが、もちろん、特定のスタイルは必要に応じて調整できます。

ステップ 3: JavaScript コード

次に、カルーセル チャートの効果を実現するための JavaScript コードの作成を開始します。まず各要素の参照を取得する必要があります。例:

var container = document.querySelector('.slider-container');
var wrapper = document.querySelector('.slider-wrapper');
var prev = document.querySelector('.slider-prev');
var next = document.querySelector('.slider-next');
var dots = document.querySelectorAll('.slider-dot');

次に、いくつかのパラメータと変数を設定する必要があります。たとえば:

var index = 0;  // 当前图片的索引
var interval = 3000;  // 切换时间间隔（3秒）
var timer = null;  // 定时器

次に、いくつかの関数を記述する必要があります。カルーセル チャートを実装する 基本機能:

画像の切り替え:

function changeImage() {
  wrapper.style.transform = 'translateX(-' + index * 800 + 'px)';
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove(&#39;active&#39;);
  }
  dots[index].classList.add(&#39;active&#39;);
}

自動切り替え:

function autoPlay() {
  timer = setInterval(function() {
    index++;
    if (index >= dots.length) {
      index = 0;
    }
    changeImage();
  }, interval);
}

自動切り替えの停止:

function stopAutoPlay() {
  clearInterval(timer);
}

のクリック イベントを処理します。ナビゲーション ボタン:

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener(&#39;click&#39;, function() {
    index = this.getAttribute(&#39;data-index&#39;);
    changeImage();
    stopAutoPlay();
  });
}

左矢印と右矢印のクリック イベントを処理します:

prev.addEventListener('click', function() {
  index--;
  if (index < 0) {
    index = dots.length - 1;
  }
  changeImage();
  stopAutoPlay();
});

next.addEventListener(&#39;click&#39;, function() {
  index++;
  if (index >= dots.length) {
    index = 0;
  }
  changeImage();
  stopAutoPlay();
});

最後に、ページが読み込まれた後に自動切り替えを開始します:

window.addEventListener('load', function() {
  autoPlay();
});

To要約すると、これは単純な JavaScript ホイールのブロードキャスト画像の実装手順です。もちろん、フェードイン・フェードアウト効果、遅延読み込み、レスポンシブレイアウトなど、ニーズに応じてさらに機能を拡張することも可能です。

以上がJavaScriptカルーセル画像JSの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。