圖片切換範例
以下是一個簡單的圖片切換效果：頁面載入時先顯示第一張圖片，點擊圖片後切換成第二張，再次點擊則切回第一張。
## 完整範例
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖片切換效果</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding-top: 50px;
}
#switchImage {
width: 400px;
height: 250px;
object-fit: cover;
cursor: pointer;
border-radius: 10px;
transition: opacity 0.3s;
}
#switchImage:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<h1>點擊圖片切換</h1>
<img
id="switchImage"
src="image1.jpg"
alt="第一張圖片"
>
<script>
const image = document.getElementById("switchImage");
let isFirstImage = true;
image.addEventListener("click", function () {
if (isFirstImage) {
image.src = "image2.jpg";
image.alt = "第二張圖片";
isFirstImage = false;
} else {
image.src = "image1.jpg";
image.alt = "第一張圖片";
isFirstImage = true;
}
});
</script>
</body>
</html>
```
## 使用方式
將兩張圖片放在 HTML 檔案同一個資料夾中，並命名為：
```text
image1.jpg
image2.jpg
```
如果圖片名稱或位置不同，修改 `src` 的內容即可，例如：
```html
src="images/photo1.png"
```
## 程式說明
### HTML
```html
<img id="switchImage" src="image1.jpg" alt="第一張圖片">
```
- `id="switchImage"`：讓 JavaScript 可以找到這張圖片。
- `src="image1.jpg"`：設定初始顯示的圖片。
- `alt`：圖片替代文字，有助於無障礙閱讀。
### JavaScript
```javascript
image.addEventListener("click", function () {
```
監聽圖片的點擊事件，當使用者點擊圖片時執行程式。
```javascript
image.src = "image2.jpg";
```
修改圖片的 `src` 屬性，就能切換到另一張圖片。
```javascript
if (isFirstImage) {
// 顯示第二張圖片
} else {
// 切回第一張圖片
}
```
使用 `isFirstImage` 判斷目前顯示的是哪一張圖片，讓圖片可以在兩張圖片之間反覆切換。
相關學習地圖、教學課程
F2E 網站前端工程