首页用html5和css写出一段轮播图代码

用html5和css写出一段轮播图代码

时间: 2024-12-10 22:52:44 浏览: 9

HTML5和CSS可以结合Bootstrap库创建一个简单的轮播图效果，以下是一个基础的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>轮播图</title>  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="image1.jpg" alt="图片1"> </div> <div class="carousel-item"> <img src="image2.jpg" alt="图片2"> </div> <div class="carousel-item"> <img src="image3.jpg" alt="图片3"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">上一张</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">下一张</span> </a> </div>  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script> </body> </html> ```

阅读全文