首页带按钮的轮播图 HTML 代码

带按钮的轮播图 HTML 代码

时间: 2024-10-22 07:25:24 浏览: 15

HTML 中制作带按钮的轮播图通常需要结合 CSS 和 JavaScript 来实现交互效果。这里是一个简单的例子，展示了如何使用 `<div>`、`<img>`、`<button>` 等元素构建基础的轮播图结构，并包含两个导航按钮： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .carousel-container { position: relative; width: 500px; overflow: hidden; } .carousel-img { display: none; } .active-slide { display: block; } .prev-btn, .next-btn { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } </style> </head> <body> <div class="carousel-container"> <img src="image1.jpg" alt="图片1" class="carousel-img active-slide"> <img src="image2.jpg" alt="图片2" class="carousel-img"> <img src="image3.jpg" alt="图片3" class="carousel-img"> </div> <button class="prev-btn" onclick="changeSlide(-1)">上一张</button> <button class="next-btn" onclick="changeSlide(1)">下一张</button> <script> let currentSlide = 0; function changeSlide(direction) { const slides = document.querySelectorAll('.carousel-img'); slides.forEach((slide, index) => slide.classList.remove('active-slide')); const newSlide = slides[currentSlide + direction]; if (newSlide) { newSlide.classList.add('active-slide'); currentSlide = (currentSlide + direction + slides.length) % slides.length; // 防止超出范围 } } </script> </body> </html> ``` 在这个示例中，`.carousel-img` 容器包含了所有的图片，当前显示的是 `.active-slide` 类的图片。`prev-btn` 和 `next-btn` 分别控制切换到前一张或下一张图片。JavaScript 里的 `changeSlide` 函数负责实际的切换。

阅读全文