首页html图片自动切换代码

html图片自动切换代码

时间: 2024-12-06 21:25:35 浏览: 6

HTML图片自动切换通常是指使用JavaScript或者CSS创建轮播图效果。下面是一个简单的例子，使用JavaScript控制图片每隔一段时间自动切换： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .slider { position: relative; width: 400px; height: 300px; overflow: hidden; } .slider img { display: none; position: absolute; } .slider img.active { display: block; } </style> </head> <body> <div class="slider"> <img src="image1.jpg" alt="图片1" class="active"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> </div> <script> var slider = document.querySelector('.slider'); var images = slider.getElementsByTagName('img'); // 设置切换时间间隔 (单位毫秒) setInterval(function() { for (var i = 0; i < images.length; i++) { if (images[i].classList.contains('active')) { images[i].classList.remove('active'); } else { images[i].classList.add('active'); break; } } }, 3000); // 每隔3秒切换一次 </script> </body> </html> ``` 在这个例子中，我们首先设置了三个隐藏的`<img>`元素，并设置其中一个为默认显示（`.active`）。然后通过JavaScript定时器每3秒遍历所有图片，移除当前显示图片的`active`样式，再添加下一个图片的`active`样式。

阅读全文