javascript圖片輪轉程式碼

JavaScript 圖片輪替程式碼

在 Web 開發中，圖片輪替是常會用到的功能。例如在產品展示、輪播圖等場景中，我們會需要顯示多張圖片，並且以一定的時間間隔切換圖片。在 JavaScript 中，我們可以透過一些簡單的程式碼來實現圖片輪替的功能。

想法

圖片輪替的實作方式可以有很多種方法，本文將介紹一種基於JavaScript 原生語法實作的方法，具體想法如下：

1.首先，我們需要準備好要輪換的圖片列表，可以使用陣列來儲存圖片資訊。

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' }
];

接下來，我們定義一個計數器變數 currentIdx，用來記錄目前正在顯示的圖片序號。因為陣列索引從 0 開始，所以 currentIdx 的初始值應該是 0。

let currentIdx = 0;

然後，我們可以透過 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 元素加入到一個 id 為 imgWrapper 的元素中，在頁面中我們需要先定義這個元素。

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

接下來，我們需要設定計時器來每隔一定時間切換顯示下一張圖片。在 JavaScript 中，我們可以透過 setTimeout 或 setInterval 函數來實作。這裡我們選擇使用 setInterval。

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

在上面的程式碼中，setInterval 函數的第一個參數是一個匿名函數，該函數用來更新當前圖片的序號和圖片訊息，並將其賦值給img 元素的src 和alt 屬性。第二個參數是定時器的時間間隔，單位是毫秒。例如上面的程式碼中，每隔 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中文網其他相關文章！