JavaScript是一種廣泛應用的腳本語言，它可以為網站開發提供各種各樣的功能。走馬燈，或稱為輪播圖，是JavaScript中廣泛使用的一種功能。走馬燈可以將多個圖片或信息以輪播的形式展示給用戶。在這篇文章中，我們將學習如何使用JavaScript創建一個簡單的走馬燈。

首先，讓我們考慮一個由4張圖片組成的走馬燈。為了創建這個走馬燈，我們需要使用HTML創建一個容器，該容器將承載走馬燈的所有元素，并使用CSS設置容器的樣式。例如：

<div id="carousel">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>

容器的樣式可能如下所示：

#carousel {
width: 500px;
height: 300px;
overflow: hidden;
}

為了實現走馬燈的效果，我們需要使用JavaScript代碼控制容器中圖片的位置。以下是實現走馬燈效果的基本JavaScript代碼：

var carousel = document.getElementById('carousel');
var images = carousel.getElementsByTagName('img');
var currentImageIndex = 0;
var timer;
function nextImage() {
images[currentImageIndex].style.display = 'none';
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.display = 'block';
}
timer = setInterval(nextImage, 3000);

這段代碼中，我們使用getElementById和getElementsByTagName方法獲取了容器中的所有圖片，并定義了一個變量currentImageIndex來跟蹤當前正在顯示的圖片的索引。我們創建了一個名為nextImage的函數，該函數在每個預定義的時間間隔內被調用，以顯示容器中的下一個圖像。

要實現輪播效果，我們可以使用setInterval方法。該方法允許我們按預定義的時間間隔調用一個函數，在這個例子中是nextImage函數。在本例中，setInterval方法被調用并將其返回值賦給變量timer。

整個走馬燈例子涉及到的JS代碼如下：

var carousel = document.getElementById('carousel');
var images = carousel.getElementsByTagName('img');
var currentImageIndex = 0;
var timer;
function nextImage() {
images[currentImageIndex].style.display = 'none';
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.display = 'block';
}
function startCarousel() {
timer = setInterval(nextImage, 3000);
}
function stopCarousel() {
clearInterval(timer);
}
carousel.addEventListener('mouseover', stopCarousel);
carousel.addEventListener('mouseout', startCarousel);
startCarousel();

定義了一個名為startCarousel的函數，該函數在容器的mouseover事件上調用，以暫停走馬燈。類似地，我們定義了一個名為stopCarousel的函數，該函數在容器的mouseout事件上調用，以恢復走馬燈。

最后一行代碼startCarousel();用于啟動走馬燈。

這是一個簡單的JavaScript走馬燈例子。請注意，此示例僅說明如何實現基本的走馬燈效果；在實際應用中，開發人員可能會添加更多的功能，例如平滑過渡、循環播放、自定義控制按鈕等等。