zhou
在現代網頁設計中，「走馬燈」是一種常見的動態效果，它能夠實現文字或圖片輪流顯示的效果，給使用者帶來更加豐富且有趣的視覺體驗。以下將透過一個簡單的前端程式碼範例來展示如何實作一個基本的走馬燈效果。此範例使用HTML、CSS及JavaScript語言進行編寫，並且提供完整的程式碼供參考。
首先，我們需要建立三個div容器，每個容器內包含一組文字內容，如下所示:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css" media="screen">
#container {
width: 300px;
height: 250px;
border: solid 1px #ccc;
position: relative;
}
.item {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div class="item">第一段文字</div>
<div class="item">第二段文字</div>
<div class="item">第三段文字</div>
</div>
<script type="text/javascript">
var container = document.getElementById('container');
var items = container.getElementsByClassName('item');
var timerId; // 用於定時器
var index = 0; // 當前選中的項目的索引值
function changeItem() {
// 如果所有項目已經全部顯示過一遍，則從頭開始循環
if (index === items.length - 1) {
index = 0;
} else {
// 否則增加一項
index += 1;
}
for (let i = 0; i < items.length; i++) {
items[i].classList.remove('active');
}
items[index].classList.add('active');
}
timerId = setInterval(changeItem, 2000); // 每隔兩秒執行一次changeItem函數
// 在載入頁面後立即初始化
window.onload = function () {
items[0].classList.add('active');
};
</script>
</body>
</html>
上述程式碼中，`id=’container’`的元素作為容器的父級，而`class=’item’`的元素則是子級，這些子級會被隱藏起來，直到被賦予了`class=’active’`。`setInterval()`函數用於定義一個間隔為2000毫秒（即每兩秒鐘）的定時器，每次到達這個時間點時，`changeItem()`函數就會被調用，該函數負責切換哪個子元素應該被設置為活動狀態。
最後，當網頁加載完成後，`window.onload`事件處理程序會自動運行並將第一個項目標記為`active`以啟動走馬燈效果。
這樣，一個簡易的走馬燈效果就完成了！你可以根據自己的需求對這段程式碼進行調整，比如加入更多樣式或者功能，例如按鈕控制、滑鼠懸浮效果等等。希望這個例子能夠幫助您理解如何在前端開發中創建這種流行的動畫效果。
