使用PHP 打造動態圖片輪播與幻燈片展示效果指南

M66 2025-06-24

實現圖片輪播的基本頁面結構

在構建圖片輪播功能之前，第一步是設計其HTML 結構。我們通常為輪播設置一個容器，並將所有圖片嵌套在其中的子元素中。下面是結構示例：

<div class="slider-container">
  <div class="slides">
    <!-- 圖片元素將由 PHP 動態生成 -->
  </div>
</div>

添加樣式美化輪播組件

為了讓輪播圖在頁面中展示良好，我們需要編寫CSS 來設定容器大小、圖片的縮放與排布方式等：

.slider-container {
  width: 600px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slides {
  width: 100%;
  height: 100%;
  display: flex;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

用PHP 動態生成圖片列表

輪播中的圖片通常來自服務器端，為此我們使用PHP 從數組中動態輸出圖片標籤。以下是實現方式：

<?php
$images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

echo '<div class="slider-container"> &#39;;
echo &#39;<div class="slides"> &#39;;
foreach ($images as $image) {
  echo &#39;<img src="' . $image . '" alt="Slide"> &#39;;
}
echo &#39;</div> &#39;;
echo &#39;</div> &#39;;
?>

以上代碼將根據$images數組中的文件路徑自動生成元素。

使用Swiper.js 添加輪播動畫效果

接下來，我們為輪播圖添加滑動與自動播放功能。可以使用成熟的JavaScript 輪播庫，例如Swiper。首先在HTML 中引入Swiper 的JS 腳本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

然後初始化Swiper 輪播邏輯，使其支持循環滾動與自動切換：

<script>
var mySwiper = new Swiper('.slider-container', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
});
</script>

總結

通過整合HTML 頁面結構、CSS 樣式、PHP 動態輸出以及JavaScript 動畫邏輯，我們就可以構建一個交互性強、內容動態的圖片輪播系統。這樣的功能非常適合用於企業官網、作品展示、活動專題等頁面中，也便於日後維護和圖片更換。