HTML三张轮番图事例
代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮番图示例</title>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: 100%;
position: absolute;
transition: all 1s;
}
</style>
<script>
window.onload = function() {
var slider = document.getElementById('slider');
var images = slider.getElementsByTagName('img');
var index = 0;
function changeImage() {
for (var i = 0; i < images.length; i++) {
images[i].style.opacity = 0;
}
images[index].style.opacity = 1;
index = (index + 1) % images.length;
}
setInterval(changeImage, 3000);
}
</script>
</head>
<body>
<div class="slider" id="slider">
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>
</body>
</html>
```
请将`image1.jpg`、`image2.jpg`和`image3.jpg`替换为实际的图片文件名。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。