首页纯html和css实现轮播图

纯html和css实现轮播图

时间: 2023-09-11 21:11:11 浏览: 80

以下是一个简单的纯HTML和CSS实现轮播图的示例： ```html <!DOCTYPE html> <html> <head> <title>轮播图</title> <style type="text/css"> .container { position: relative; width: 600px; height: 400px; overflow: hidden; } .container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .container img.active { opacity: 1; } </style> </head> <body> <div class="container"> <img src="image1.jpg" class="active"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <script type="text/javascript"> var images = document.getElementsByTagName('img'); var index = 0; setInterval(function() { images[index].className = ''; index = (index + 1) % images.length; images[index].className = 'active'; }, 2000); </script> </body> </html> ``` 解释一下代码： 1. HTML部分：使用一个`div`元素作为容器，其中包含了三个`img`元素，分别对应三张图片。第一张图片默认添加了`active`类，表示默认显示。 2. CSS部分：设置了`.container`元素的样式，使其具有相对定位、固定宽高、隐藏溢出等特性；设置了`.container img`元素的样式，使其具有绝对定位、铺满容器、透明度为0（不可见）等特性；设置了`.container img.active`元素的样式，使其透明度为1（可见）。 3. JavaScript部分：获取所有`img`元素，初始化`index`值为0，使用`setInterval`函数每隔2秒钟执行一次匿名函数。匿名函数将当前显示的`img`元素的`active`类移除，将`index`值自增1并取余，再将下一个`img`元素添加`active`类，实现轮播效果。注意：这个示例仅作为参考，实际应用中可能需要根据需求进行修改。