JavaScript を使用して画像カルーセル効果を実現する-jsチュートリアル-php.cn

JavaScript を使用して画像カルーセル効果を実現する

WBOY

リリース： 2023-06-15 21:09:42

オリジナル

3694 人が閲覧しました

JavaScript は、画像カルーセル効果などのさまざまな動的効果を実現するために使用できる人気のあるスクリプト言語です。この記事では、JavaScript を使用して画像カルーセル効果を作成する方法を説明します。この記事は次の 3 つの部分に分かれています。

HTML と CSS の準備
#JavaScript コードの記述
#画像カルーセル効果を実現する

HTML と CSS の準備

画像カルーセル効果には、以下に示すように HTML フレームワークが必要です:

<div class="slider">
    <ul class="slides">
        <li><img src="image1.jpg"></li>
        <li><img src="image2.jpg"></li>
        <li><img src="image3.jpg"></li>
        <li><img src="image4.jpg"></li>
    </ul>
</div>

ログイン後にコピー

これに基づいて、使用する CSS スタイルが必要です。フレームには特定の以下に示すスタイルとレイアウト:

.slider {
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.slides {
    display: flex;
    list-style: none;
    height: 100%;
    margin: 0;
    padding: 0;
}
.slides li {
    flex: 1;
}
.slides img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ログイン後にコピー

JavaScript コードの記述

最初に、次のように、画像カルーセルとスライドステータスを保存するためにいくつかの変数と定数を設定する必要があります。表示:

const slides = document.querySelectorAll('.slides li');
const slider = document.querySelector('.slider');
const next = document.querySelector('.next');
const prev = document.querySelector('.prev');
const auto = true; // 是否自动播放
const intervalTime = 5000; // 图片切换时间间隔
let slideInterval;
let slideIndex = 0; // 当前图片索引

ログイン後にコピー

次に、画像カルーセル効果を実現する関数を記述する必要があります。以下は関数の例です:

function nextSlide() {
    slides[slideIndex].classList.remove('active');
    slideIndex = (slideIndex + 1) % slides.length;
    slides[slideIndex].classList.add('active');
}

ログイン後にコピー

この関数は、現在のピクチャの「アクティブ」クラスを削除し、次のピクチャの「アクティブ」クラスを追加し、現在のピクチャのインデックスを 1 増やします。画像カルーセル効果を実現します。

次に、自動再生関数を処理する別の関数を記述する必要があります:

function startSlide() {
    if (auto) {
        slideInterval = setInterval(nextSlide, intervalTime);
    }
}

ログイン後にコピー

この関数は、画像を自動再生する必要があるかどうかをチェックし、そうであれば、一定時間後に呼び出されます。間隔先ほど作成した関数 nextSlide です。

最後に、ユーザーが画像を手動で切り替えることができるように、クリックイベントを処理する 2 つの関数も記述する必要があります。

function pauseSlide() {
    clearInterval(slideInterval);
}

function clickPrev() {
    pauseSlide();
    slides[slideIndex].classList.remove('active');
    slideIndex--;
    if (slideIndex < 0) {
        slideIndex = slides.length - 1;
    }
    slides[slideIndex].classList.add('active');
}
function clickNext() {
    pauseSlide();
    nextSlide();
}

ログイン後にコピー

これらの関数は、自動再生の一時停止、前の画像への切り替え、および切り替えを表します。次の画像機能に進みます。

画像カルーセル効果の実装

これで、HTML、CSS、JavaScript コードがすべて準備できました。このすべてのコードを同じ HTML ファイルに配置し、それを開いて効果を確認してみましょう。

左右の矢印をクリックするか、自動再生機能を使用して、画像を切り替えることができます。ニーズに合わせてこれらの矢印のスタイル、位置、サイズをカスタマイズすることもできます。

概要

この記事では、JavaScript を使用して単純な画像カルーセル効果を実装する方法を学びました。その過程で、私たちはさまざまなイベントや状態を処理し、動的で流動的なユーザーエクスペリエンスを生み出す方法を学びました。画像カルーセル効果に似た、よりダイナミックな効果が必要な場合は、JavaScript プログラミングを深く学ぶことをお勧めします。JavaScript には無限の創造的な可能性があります。

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