首页用html做一个图片轮播的代码

用html做一个图片轮播的代码

时间: 2024-01-26 12:02:42 浏览: 66

好的，以下是一个基本的 HTML 图片轮播代码： ```html <!DOCTYPE html> <html> <head> <title>图片轮播</title> <style> .container { width: 500px; height: 300px; overflow: hidden; position: relative; } .slider { width: 2000px; position: absolute; left: 0; top: 0; animation: slide 10s infinite; } .slider img { float: left; width: 500px; height: 300px; } @keyframes slide { 0% { left: 0; } 20% { left: -500px; } 40% { left: -1000px; } 60% { left: -1500px; } 80% { left: -2000px; } 100% { left: 0; } } </style> </head> <body> <div class="container"> <div class="slider"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> <img src="img5.jpg"> </div> </div> </body> </html> ``` 其中，`.container` 是容器，设置了宽度、高度和溢出隐藏；`.slider` 是图片轮播的主体，包含了若干个 `img` 元素；`@keyframes slide` 定义了图片轮播的动画，通过改变 `left` 属性来实现图片的滑动。

阅读全文