首页写一份轮播图的html代码

写一份轮播图的html代码

时间: 2023-11-29 14:44:13 浏览: 85

以下是一份简单的轮播图HTML代码，包括5张图片的自动播放和手动切换功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> #slider { width: 600px; height: 400px; position: relative; overflow: hidden; } #slider img { width: 600px; height: 400px; position: absolute; top: 0; left: 0; display: none; } #slider img:first-child { display: block; } #slider .prev, #slider .next { position: absolute; top: 50%; margin-top: -20px; font-size: 30px; color: #fff; cursor: pointer; z-index: 2; } #slider .prev { left: 20px; } #slider .next { right: 20px; } #slider .nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; } #slider .nav span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; margin: 0 5px; cursor: pointer; } #slider .nav span.active { background-color: #f00; } </style> </head> <body> <div id="slider"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <img src="images/4.jpg" alt=""> <img src="images/5.jpg" alt=""> <a class="prev">❮</a> <a class="next">❯</a> <div class="nav"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script src="slider.js"></script> </body> </html> ```

阅读全文