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

JavaScriptカルーセルチャートの実装方法

WBOY

リリース： 2023-05-26 19:20:06

オリジナル

1805 人が閲覧しました

フロントエンド開発テクノロジの継続的な発展により、JavaScript はフロントエンド開発に不可欠な部分になりました。 Web デザインでは、カルーセル画像は非常に一般的な表示方法であり、Web サイトで画像、テキスト、その他のコンテンツをより適切に表示するのに役立ちます。この記事では、JavaScript を使用して簡単なカルーセルグラフを実装する方法を紹介します。

1. HTML レイアウト

まず、カルーセルの HTML レイアウトを構築する必要があります。ここでは、以下に示すように、比較的単純な HTML と CSS メソッドを使用してカルーセル図コンテナーを作成します。

<div class="slider">
    <ul class="slider-items">
        <li class="slider-item"><img src="1.jpg"></li>
        <li class="slider-item"><img src="2.jpg"></li>
        <li class="slider-item"><img src="3.jpg"></li>
    </ul>
</div>

ログイン後にコピー

このうち、.slider はカルーセル図コンテナー を表します。 slider-items はカルーセルアイテムコンテナーを表し、.slider-item は単一のカルーセルアイテムを表します。 JavaScript でカルーセル項目の動きを制御するには、.slider-items の left プロパティを設定する必要があります。

2. JS によるカルーセルの実装

1. 要素の取得

カルーセルチャートを実装するには、まず操作する必要がある要素ノードを取得する必要があります。配列を定義しますitems は、カルーセル項目を保存し、querySelectorAll() メソッドを通じて slider-item クラスを取得するために使用されます。コードは次のとおりです:

var slider = document.querySelector('.slider');
var sliderItems = document.querySelectorAll('.slider-item');
var items = [];

for (var i = 0; i < sliderItems.length; i++) {
    items.push(sliderItems[i]);
}

ログイン後にコピー

2. 関連パラメータの設定

カルーセルチャートの実装プロセスでは、現在選択されているアイテム、カルーセルチャートの幅、トランジションの設定などの関連パラメータを設定する必要があります。最後のアイテムと最初のアイテムの間で待機します。コードは次のとおりです:

var current = 0;
var width = 600;
var height = 400;
var imgCount = items.length;
var animationSpeed = 1000;
var pause = 3000;
var interval;
var sliderContainer = document.querySelector('.slider-items');
sliderContainer.style.width = width * items.length + 'px';
sliderContainer.style.height = height + 'px';

ログイン後にコピー

3. カルーセルチャートの実装

次に、JavaScript を使用してカルーセルチャートを実装できます。具体的なプロセスは次のとおりです。

(1) startSlide 関数と slideLeft 関数を作成します。

startSlide(): カルーセルを開始するために使用されます。現在選択されている項目の次の項目が関数で定義されます。現在の項目が最後の項目の場合、次の項目が最初の項目として設定され、setInterval() によってカルーセルチャートが循環されます。 play;
slideLeft(): 左に回転するために使用されます。 animate() メソッドは、アニメーション遷移を実行し、カルーセル効果を完成させるために関数内で使用されます。

function startSlide() {
    interval = setInterval(function () {
        slideLeft();
    }, pause);
}

function slideLeft() {
    if (current === imgCount - 1) {
        current = -1;
    }
    current++;
    animate(sliderContainer, -width * current, animationSpeed);
}

ログイン後にコピー

(2) animate 関数を作成してアニメーション効果を実現します。関数内では requestAnimationFrame() メソッドを使用してアニメーションのスムーズな遷移を実現し、より優れたカルーセル効果を実現します。

function animate(el, left, speed) {
    var start = el.offsetLeft;
    var destination = left;
    var startTime = new Date().getTime();
    var distance = destination - start;

    function frame() {
        var elapsedTime = new Date().getTime() - startTime;
        var position = easeInOutQuart(elapsedTime, start, distance, speed);
        el.style.left = position + 'px';
        if (elapsedTime < speed) {
            requestAnimationFrame(frame);
        }
    }
    frame();
}

ログイン後にコピー

(3) アニメーション効果を最適化するためのイージング関数 easeInOutQuart を作成します。

function easeInOutQuart(t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}

ログイン後にコピー

(4) 最後に、JavaScript にカルーセル制御関数を追加する必要があります。ここでは、addEventListener() メソッドを通じて mouseenter および mouseleave イベントを追加しました。これらは、マウスが出入りするときにカルーセルを一時停止および開始するために使用されます。完全なコードは次のとおりです。

slider.addEventListener('mouseenter', function () {
    clearInterval(interval);
});

slider.addEventListener('mouseleave', function () {
    startSlide();
});

startSlide();

ログイン後にコピー

3. 完全なコード

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JavaScript轮播图实现</title>
    <style>
        .slider {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        .slider-items {
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .slider-item {
            display: inline-block;
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul class="slider-items">
            <li class="slider-item"><img src="1.jpg"></li>
            <li class="slider-item"><img src="2.jpg"></li>
            <li class="slider-item"><img src="3.jpg"></li>
        </ul>
    </div>
    <script>
        var slider = document.querySelector('.slider');
        var sliderItems = document.querySelectorAll('.slider-item');
        var items = [];

        for (var i = 0; i < sliderItems.length; i++) {
            items.push(sliderItems[i]);
        }

        var current = 0;
        var width = 600;
        var height = 400;
        var imgCount = items.length;
        var animationSpeed = 1000;
        var pause = 3000;
        var interval;
        var sliderContainer = document.querySelector('.slider-items');
        sliderContainer.style.width = width * items.length + 'px';
        sliderContainer.style.height = height + 'px';

        function startSlide() {
            interval = setInterval(function () {
                slideLeft();
            }, pause);
        }

        function slideLeft() {
            if (current === imgCount - 1) {
                current = -1;
            }
            current++;
            animate(sliderContainer, -width * current, animationSpeed);
        }

        function animate(el, left, speed) {
            var start = el.offsetLeft;
            var destination = left;
            var startTime = new Date().getTime();
            var distance = destination - start;

            function frame() {
                var elapsedTime = new Date().getTime() - startTime;
                var position = easeInOutQuart(elapsedTime, start, distance, speed);
                el.style.left = position + 'px';
                if (elapsedTime < speed) {
                    requestAnimationFrame(frame);
                }
            }
            frame();
        }

        function easeInOutQuart(t, b, c, d) {
            if ((t /= d / 2) < 1) 
                return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }

        slider.addEventListener('mouseenter', function () {
            clearInterval(interval);
        });

        slider.addEventListener('mouseleave', function () {
            startSlide();
        });

        startSlide();
    </script>
</body>
</html>

ログイン後にコピー

4. まとめ

この時点で、カルーセルチャートを実装するためのコードがすべて完成しました。 JavaScript。上記の例を通じて、JavaScript を使用してカルーセルチャートを実装する具体的なプロセスを理解し、シンプルでわかりやすいカルーセルチャートを実装し、カルーセルチャートを実装するための JavaScript の操作方法を習得することができます。この記事が、JavaScript フロントエンド開発技術をさらに習得するのに役立つことを願っています。

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