JavaScriptカルーセル画像JSの書き方-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-24 14:42:14

オリジナル

773 人が閲覧しました

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

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

ステップ 1: HTML 構造

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

ログイン後にコピー

このうち、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('active');
  }
  dots[index].classList.add('active');
}

ログイン後にコピー

自動切り替え:

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('click', function() {
    index = this.getAttribute('data-index');
    changeImage();
    stopAutoPlay();
  });
}

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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