首页hbuilder图片轮播

hbuilder图片轮播

时间: 2024-03-05 11:44:54 浏览: 150

根据提供的引用内容，以下是使用HBuilder实现图片轮播的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片轮播</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="script.js"></script> </head> <body> <div class="slideshow-container"> <div class="slide"> <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> </body> </html> ``` ```css /* style.css */ .slideshow-container { position: relative; width: 100%; height: 300px; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } ``` ```javascript // script.js var slides = document.querySelectorAll('.slide'); var currentSlide = 0; function showSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); } setInterval(showSlide, 3000); ``` 请注意，上述代码中的图片路径和样式可以根据实际情况进行修改。此外，还需要将相关的图片文件放置在与HTML文件相同的目录下。

阅读全文