歡迎來到 JavaScript 入門系列教程。本教程將帶你踏上 JavaScript 開發之旅，從基礎到高級概念，逐步提升你的 JavaScript 技能。

焦點圖是什么？

焦點圖，又稱為輪播圖或幻燈片，是一種動態圖像展示組件，通常在網站和應用程序中展示多個圖像或內容塊。它通過自動或手動切換顯示不同的內容。

使用 JavaScript 構建焦點圖

構建一個基本的焦點圖需要以下步驟：

1. 準備 HTML 結構：創建父容器和圖像元素。
2. 使用 CSS 樣式：設置容器布局、圖像大小和導航元素。
3. 編寫 JavaScript 代碼：實現圖像切換、自動播放和用戶交互。

HTML 結構

CSS 樣式

```css slider {width: 100%;height: 400px;overflow: hidden; }slider img {width: 100%;height: 100%;object-fit: cover; }

JavaScript 代碼

```javascript // 獲取焦點圖元素 const slider = document.getElementById('slider');// 獲取所有圖像元素 const images = slider.getElementsByTagName('img');// 當前顯示的圖像索引 let currentImageIndex = 0;// 自動播放間隔（毫秒） const autoplayInterval = 5000;// 計時器句柄 let autoplayTimer;// 下一張圖像 function nextImage() {currentImageIndex++;if (currentImageIndex >= images.length) {currentImageIndex = 0;}showImage(currentImageIndex); }// 上一張圖像 function prevImage() {currentImageIndex--;if (currentImageIndex < 0) {currentImageIndex = images.length - 1;}showImage(currentImageIndex); }// 顯示指定索引的圖像 function showImage(index) {for (let i = 0; i < images.length; i++) {images[i].style.display = 'none';}images[index].style.display = 'block'; }// 自動播放 function startAutoplay() {autoplayTimer = setInterval(nextImage, autoplayInterval); }// 停止自動播放 function stopAutoplay() {clearInterval(autoplayTimer); }// 添加事件監聽器 document.addEventListener('mousemove', stopAutoplay); document.addEventListener('mouseleave', startAutoplay);// 初始加載時顯示第一張圖像 showImage(currentImageIndex);// 開始自動播放 startAutoplay();

完整代碼示例

自定義和高級功能

自動播放速度調整導航按鈕和圓點指示器觸摸手勢支持延遲加載和懶加載根據圖像寬高比調整尺寸

結論

通過遵循本教程中的步驟，你已經掌握了使用 JavaScript 構建專業人士級別的焦點圖。通過探索高級功能，你可以進一步提升你的焦點圖，打造出令人驚嘆的交互式界面。繼續練習和探索，精通 JavaScript 世界！

---

---

相關標簽： 初入宗門、 掌握javascript基礎、 掌握JavaScript、 打造專業人士級別的焦點圖、

上一篇：JavaScript焦點圖進階創建響應式和動態效果

下一篇：揭秘JavaScript焦點圖特效的幕后秘密揭秘ja