JavaScriptカルーセルチャートの作り方-フロントエンドQ&A-php.cn

JavaScriptカルーセルチャートの作り方

王林

リリース： 2023-05-09 09:22:06

オリジナル

1178 人が閲覧しました

JavaScript カルーセルを作成するにはどうすればよいですか?

Web フロントエンド開発の発展に伴い、カルーセル画像はほとんどの Web サイトやアプリケーションの共通コンポーネントの 1 つになりました。しかし、フロントエンド開発が初めての多くの友人は、JavaScript カルーセルチャートをどうやって作成するのかと尋ねると思います。

この記事では、JavaScript を使用してカルーセルグラフを作成する方法を紹介し、カルーセルグラフを実装するための基本原則と一般的なテクノロジを徐々に理解できるようにします。

1. カルーセルチャートの基本原理

カルーセルチャートは、その名の通り、ループ再生できる画像群であり、自動ループまたは手動切り替えを実現します。 JavaScript を使用して、ユーザーが複数の画像やコンテンツを閲覧できるようにします。

カルーセルチャートの基本原理は、HTML 構造と JavaScript ロジックの 2 つの部分に分かれています。

HTML 構造:

HTML 構造はカルーセルグラフの基礎であり、その構造はおおよそ次のとおりです:

<div class="carousel">
  <ul class="carousel-list">
    <li class="carousel-item"><img src="image1.jpg" alt="image1"></li>
    <li class="carousel-item"><img src="image2.jpg" alt="image2"></li>
    <li class="carousel-item"><img src="image3.jpg" alt="image3"></li>
    <li class="carousel-item"><img src="image4.jpg" alt="image4"></li>
    <li class="carousel-item"><img src="image5.jpg" alt="image5"></li>
  </ul>
</div>

ログイン後にコピー

このうち、.carouselはカルーセルチャートコンテナー、.carousel-list は画像リストコンテナー、.carousel-item は個々の画像のコンテナーです。

JavaScript ロジック:

JavaScript ロジックは、通常は次の方法でカルーセルチャートのコアを実装します:

1. カルーセルチャートのページ要素を取得し、JavaScript コードを使用します。 HTML の .carousel 要素を選択します。

var carousel = document.querySelector('.carousel');

ログイン後にコピー

2. 画像リストコンテナと個別画像コンテナの取得

var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');

ログイン後にコピー

3. カルーセル画像の幅の取得

var itemWidth = items[0].offsetWidth;

ログイン後にコピー

4. 切り替え間隔と設定タイミング 5. 自動再生と手動切り替えを設定する、

var delay = 3000;
var interval;

ログイン後にコピー

2. シンプルなカルーセルチャートを実装する

これで、カルーセルチャートの基本原理を理解し、カルーセルチャートの基本的な効果を達成しました。コードによるカルーセルチャート。以下では、この効果に基づいて単純なカルーセルチャートを実装します。

HTML 構造:

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

function stopCarousel() {
    clearInterval(interval);
}

ログイン後にコピー

JavaScript コード:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Carousel</title>  
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="carousel">
      <ul class="carousel-list">
        <li class="carousel-item"><img src="img/1.jpg" alt="1"></li>
        <li class="carousel-item"><img src="img/2.jpg" alt="2"></li>
        <li class="carousel-item"><img src="img/3.jpg" alt="3"></li>
        <li class="carousel-item"><img src="img/4.jpg" alt="4"></li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

ログイン後にコピー

CSS コード:

var carousel = document.querySelector('.carousel');
var list = carousel.querySelector('ul');
var items = carousel.querySelectorAll('.carousel-item');
var itemWidth = items[0].offsetWidth; 
var delay = 3000;
var interval;

// 自动播放
function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        if(left <= itemWidth - list.offsetWidth) {
            list.style.left = "0px";
        } else {
            list.style.left = left + 'px';
        }
    }, delay);
}

// 手动切换
function stopCarousel() {
    clearInterval(interval);
}

// 启动轮播
startCarousel();

ログイン後にコピー

3. 複数の効果を実現するカルーセル画像

#上記の例を通じて、簡単なカルーセルチャートの作成方法を学びました。ただし、通常、カルーセル画像には上記の効果だけではなく、JavaScript を使用してより実用的なカルーセル画像効果を実現することもできます。

1. イージング効果

イージング効果とは、各映像の切り替わりの速度を速い速度から遅い速度に変える効果です。 JavaScript を使用すると、通常次のように記述できます:

.carousel {
  position: relative;
  overflow: hidden;
  width: 400px;           /* 轮播图容器的宽度 */
  height: 300px;          /* 轮播图容器的高度 */
}
.carousel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: ${(items.length * 100)}%;
}
.carousel-item {
  float: left;
  width: calc(100% / ${(items.length)});
}
.carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

ログイン後にコピー

2. レスポンシブレイアウト

レスポンシブ Web デザインは、現代のフロントエンドデザインでは常識です。画面サイズ、Web レイアウトによりよく適応するには、追加の調整と最適化を行う必要があります。

function startCarousel() {
    interval = setInterval(function(){
        var left = parseInt(list.style.left) + itemWidth;
        var startTime = Date.now();
        var easing = function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        };
        var animate = function() {
            var time = Date.now() - startTime;
            var easingLeft = easing(time, parseInt(list.style.left), -itemWidth, delay);
            if(time <= delay) {
                list.style.left = easingLeft + 'px';
                requestAnimationFrame(animate);
            } else {
                list.style.left = -itemWidth + 'px';
                list.appendChild(items[0]);
            }
        };
        requestAnimationFrame(animate);
    }, delay);
}

ログイン後にコピー

その中で、

ユニットはビューポートの幅のパーセンテージとして長さを指定でき、画面サイズがどのように変化してもカルーセルは応答性の高いレイアウトを維持します。

4. 概要

これまで、JavaScript を使用してカルーセルを作成する基本原理と実装方法を理解しました。調整と最適化を通じて、豊富なスタイルと効果を備えたカルーセルコンポーネントをより多く実装できるため、Web コンテンツとサービスに対するユーザーのニーズを十分に満たすことができます。

もちろん、JavaScript でカルーセルを作るには、まだまだ技術的に難しい点や操作面で習得すべき点がたくさんありますが、実際の開発の中で徐々に習得していただき、継続的にプログラミング能力を向上していただければ幸いです。

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