照片翻頁(yè)CSS代碼示例

照片翻頁(yè)是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的交互效果，通過(guò)CSS可以實(shí)現(xiàn)，以下是一個(gè)簡(jiǎn)單的照片翻頁(yè)CSS代碼示例，供您參考：

HTML結(jié)構(gòu)：

<div class="photo-gallery">
  <img class="photo" src="photo1.jpg" alt="Photo 1">
  <img class="photo" src="photo2.jpg" alt="Photo 2">
  <img class="photo" src="photo3.jpg" alt="Photo 3">
  <img class="photo" src="photo4.jpg" alt="Photo 4">
  <img class="photo" src="photo5.jpg" alt="Photo 5">
  <img class="photo" src="photo6.jpg" alt="Photo 6">
  <img class="photo" src="photo7.jpg" alt="Photo 7">
  <img class="photo" src="photo8.jpg" alt="Photo 8">
  <img class="photo" src="photo9.jpg" alt="Photo 9">
  <img class="photo" src="photo10.jpg" alt="Photo 10">
</div>

CSS樣式：

.photo-gallery {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.photo {
  position: absolute;
  width: 300px;
  height: 200px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.photo:first-child {
  opacity: 1;
}

JavaScript腳本：

var photos = document.querySelectorAll('.photo');
var currentPhotoIndex = 0;
var photoInterval = setInterval(function() {
  photos[currentPhotoIndex].style.opacity = 0;
  currentPhotoIndex = (currentPhotoIndex + 1) % photos.length;
  photos[currentPhotoIndex].style.opacity = 1;
}, 2000); // 每2秒切換一張圖片

在這個(gè)示例中，我們使用了CSS的position、width、height和opacity屬性來(lái)實(shí)現(xiàn)照片翻頁(yè)效果，我們將照片容器設(shè)置為相對(duì)定位，并限制其寬度和高度，我們將每張照片設(shè)置為***定位，并設(shè)置其寬度和高度，我們使用CSS過(guò)渡效果來(lái)平滑地切換圖片，我們使用JavaScript腳本來(lái)定期切換圖片，您可以根據(jù)自己的需求調(diào)整樣式和腳本。