首页html css 实现轮播图

html css 实现轮播图

时间: 2023-12-28 14:06:00 浏览: 84

以下是使用HTML和CSS实现轮播图的示例： ```html <!DOCTYPE html> <html> <head> <style> .carousel { width: 500px; height: 300px; overflow: hidden; position: relative; } .carousel .imgs { width: 2000px; height: 300px; position: absolute; transition: margin-left 1s; } .carousel .imgs img { width: 500px; height: 300px; float: left; } .carousel .dots { text-align: center; margin-top: 10px; } .carousel .dots span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: gray; margin: 0 5px; cursor: pointer; } .carousel .dots span.active { background-color: black; } </style> </head> <body> <div class="carousel"> <div class="imgs"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> <div class="dots"> <span class="active"></span> <span></span> <span></span> <span></span> </div> </div> </body> </html> ``` 这个示例中，我们使用了一个包含四张图片的`<div>`元素，并使用CSS设置了轮播图的样式。通过设置`.carousel`的宽度和高度，以及`.carousel .imgs`的宽度和高度，我们可以控制轮播图的大小。通过设置`.carousel .imgs`的`position`为`absolute`，我们可以将图片放置在同一个位置，并通过修改`margin-left`属性来切换图片。我们还添加了一个包含四个圆点的`<div>`元素，用于表示当前显示的图片。

阅读全文