首页HTML 网页设计中滚动的循环播放的照片代码和实际展示效果的实例

HTML 网页设计中滚动的循环播放的照片代码和实际展示效果的实例

时间: 2024-12-24 18:33:39 浏览: 27

HTML和CSS结合JavaScript可以创建循环滚动照片的效果。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #slideshow-container { position: relative; width: 400px; height: 300px; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; transition: transform 1s ease-in-out; } .slide img { width: 100%; height: auto; } </style> </head> <body> <div id="slideshow-container"> <div class="slide" style="transform: translateX(0)"> <img src="image1.jpg" alt="Slide 1"> </div> <div class="slide" style="transform: translateX(-100%)"> <img src="image2.jpg" alt="Slide 2"> </div>  <div class="slide" style="transform: translateX(-200%)"> <img src="image3.jpg" alt="Slide 3"> </div> </div> <script> const slides = document.querySelectorAll('.slide'); let slideIndex = 0; function showSlides() { slides.forEach((slide, index) => { slide.style.transform = `translateX(${index * 100%}%)`; }); setTimeout(() => { slideIndex++; if (slideIndex >= slides.length) slideIndex = 0; // 循环处理 showSlides(); }, 3000); // 每隔3秒切换到下一图 } showSlides(); </script> </body> </html> ``` 这个示例中，图片会每隔3秒钟从左向右平移一次，当滑动到最后一张时，它会自动回到第一张，形成循环滚动的效果。

阅读全文