首页高保真原型实现轮播图

高保真原型实现轮播图

时间: 2023-12-25 10:28:56 浏览: 115

高保真原型可以通过使用HTML、CSS和JavaScript来实现轮播图。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>高保真原型轮播图</title> <style> .slideshow { position: relative; width: 500px; height: 300px; overflow: hidden; } .slideshow img { width: 100%; height: 100%; object-fit: cover; } .slideshow .slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slideshow .slide.active { opacity: 1; } </style> </head> <body> <div class="slideshow"> <div class="slide active"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> <script> var slides = document.querySelectorAll('.slide'); var currentSlide = 0; function showSlide(index) { slides[currentSlide].classList.remove('active'); slides[index].classList.add('active'); currentSlide = index; } setInterval(function() { var nextSlide = (currentSlide + 1) % slides.length; showSlide(nextSlide); }, 3000); </script> </body> </html> ``` 这段代码创建了一个包含三张图片的轮播图。每隔3秒钟，轮播图会自动切换到下一张图片。你可以根据需要修改图片的数量和切换时间。

阅读全文