HTML 照片墻自動循環代碼是一種非常流行的 Web 技術,可以讓用戶輕松瀏覽多張圖片,而無需手動切換。該技術主要基于 HTML、CSS 和 JavaScript 實現,以下是一個簡單的 HTML 照片墻自動循環代碼示例:
<html> <head> <title>HTML 照片墻自動循環代碼</title> <style> #wrapper { width: 960px; margin: 0 auto; } #photo-wall { width: 100%; height: 500px; margin-bottom: 20px; overflow: hidden; position: relative; } .photo { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .active { opacity: 1; } </style> </head> <body> <div id="wrapper"> <div id="photo-wall"> <img class="photo active" src="image1.jpg" /> <img class="photo" src="image2.jpg" /> <img class="photo" src="image3.jpg" /> <img class="photo" src="image4.jpg" /> </div> <script> var photos = document.querySelectorAll(".photo"); var index = 0; setInterval(function() { photos[index].classList.remove("active"); index = (index + 1) % photos.length; photos[index].classList.add("active"); }, 3000); </script> </div> </body> </html>
在上述代碼中,我們使用了 CSS 的 position 屬性將圖片定位到了照片墻中,然后通過將 opacity 設置為 0 來隱藏所有圖片,只有當前被選中的圖片 opacity 設置為 1 才會顯現出來。在 JavaScript 中,我們使用 setInterval 方法來循環切換圖片,每 3 秒鐘更新一次。
以上是一個基本的 HTML 照片墻自動循環代碼,用戶也可以根據自己的需求進行修改和擴展。