JavaScript画像回転コード

JavaScript 画像回転コード

Web 開発では、画像の回転はよく使用される機能です。たとえば、商品の表示やカルーセル画像などのシナリオでは、複数の画像を表示し、一定の時間間隔で画像を切り替える必要があります。 JavaScript では、いくつかの簡単なコードを通じて画像の回転関数を実装できます。

アイデア

画像の回転を実装するにはさまざまな方法があります。この記事では、JavaScript ネイティブ構文に基づいた方法を紹介します。具体的なアイデアは次のとおりです。 . 、回転する画像のリストを準備する必要があり、配列を使用して画像情報を保存できます。

2. 次に、現在の画像がリスト内のどの画像であるかを記録するカウンタを定義する必要があります。

3. 次に、JavaScript の DOM API を呼び出して、ページに画像を動的に追加できます。

4. 最後に、カウンターを時々更新し、次の画像の表示に切り替えるようにタイマーを設定する必要があります。

実装手順

まず、画像リストを準備する必要があります。ここでは、JavaScript 配列を使用して画像情報を保存できます。配列内の各要素は、画像の URL と alt を含むオブジェクトです。

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

次に、現在表示されている画像のシリアル番号を記録するカウンタ変数

を定義します。配列のインデックス付けは 0 から始まるため、currentIdx の初期値は 0 である必要があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let currentIdx = 0;</pre><div class="contentsignin">ログイン後にコピー</div></div>次に、JavaScript の DOM API を使用して img 要素を動的に作成し、ページに追加します。

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

新しく作成された img 要素は、imgWrapper の ID を持つ要素に追加されることに注意してください。最初にこの要素をページ内で定義する必要があります。

<div id="imgWrapper"></div>

次に、一定時間ごとに次の画像を表示するように切り替えるタイマーを設定する必要があります。 JavaScript では、

または setInterval 関数を通じてこれを実現できます。ここでは、setInterval を使用することを選択します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let intervalId = setInterval(function() { currentIdx++; if (currentIdx &gt;= images.length) { currentIdx = 0; } img.src = images[currentIdx].url; img.alt = images[currentIdx].alt; }, 3000);</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードでは、

関数の最初のパラメータは匿名関数です。この関数は、現在の画像のシリアル番号と画像情報を更新し、それを割り当てるために使用されます。 img 要素、src および alt 属性。 2 番目のパラメーターは、タイマーの時間間隔 (ミリ秒単位) です。たとえば、上記のコードでは、匿名関数は 3000 ミリ秒 (つまり 3 秒) ごとに実行されます。 最後に、ページがアンロードされるときにタイマーをクリアする必要があります。そうしないと、メモリ リークが発生する可能性があります。

window.onunload = function() {
    clearInterval(intervalId);
};

完全なコード

上記のコードを統合すると、JavaScript ネイティブ構文に基づいた完全な画像回転コードが得られます。

let images = [
    { url: './img/1.jpg', alt: 'pic1' },
    { url: './img/2.jpg', alt: 'pic2' },
    { url: './img/3.jpg', alt: 'pic3' },
    { url: './img/4.jpg', alt: 'pic4' },
    { url: './img/5.jpg', alt: 'pic5' }
];

let currentIdx = 0;

let img = document.createElement('img');
img.src = images[currentIdx].url;
img.alt = images[currentIdx].alt;
document.getElementById('imgWrapper').appendChild(img);

let intervalId = setInterval(function() {
    currentIdx++;
    if (currentIdx >= images.length) {
        currentIdx = 0;
    }
    img.src = images[currentIdx].url;
    img.alt = images[currentIdx].alt;
}, 3000);

window.onunload = function() {
    clearInterval(intervalId);
};

概要

この記事では、JavaScript ネイティブ構文を使用して実装された画像回転コードを紹介します。この記事を読むことで、JavaScript 配列、DOM API、タイマーを使用して画像の回転を実装する方法を学ぶことができます。もちろん、このコードは基本的なコードにすぎず、実際のニーズに応じて変更および最適化できます。

以上がJavaScript画像回転コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。