首页写一个html 轮播图

写一个html 轮播图

时间: 2023-12-25 08:30:34 浏览: 69

以下是一个简单的HTML轮播图的示例： ```html <!DOCTYPE html> <html> <head> <title>HTML轮播图</title> <style> .slideshow { width: 500px; height: 300px; overflow: hidden; position: relative; } .slideshow img { width: 100%; height: 100%; object-fit: cover; } .slideshow .item { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slideshow .item.active { opacity: 1; } </style> </head> <body> <div class="slideshow"> <div class="item active"> <img src="image1.jpg" alt="Image 1"> </div> <div class="item"> <img src="image2.jpg" alt="Image 2"> </div> <div class="item"> <img src="image3.jpg" alt="Image 3"> </div> </div> <script> // 获取轮播图的图片数量 let length = document.querySelectorAll('.item').length; console.log("轮播图有 " + length + " 张图片"); </script> </body> </html> ``` 这个示例中，我们使用了HTML、CSS和JavaScript来创建一个简单的轮播图。通过CSS设置轮播图容器的样式，通过JavaScript获取轮播图的图片数量并输出到控制台。

阅读全文