html5图片轮播
时间: 2023-10-19 19:05:15 浏览: 39
下面是一个简单的 HTML5 图片轮播示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5图片轮播</title>
<style type="text/css">
#slider {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
#slider img {
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
#slider img.active {
z-index: 2;
opacity: 1;
transition: opacity 1s ease-in-out;
}
#slider img.inactive {
z-index: 1;
opacity: 0;
transition: opacity 1s ease-in-out;
}
</style>
</head>
<body>
<div id="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg" class="inactive">
<img src="image3.jpg" class="inactive">
</div>
<script type="text/javascript">
var images = document.querySelectorAll("#slider img");
var current = 0;
function changeImage() {
images[current].className = "inactive";
current = (current + 1) % images.length;
images[current].className = "active";
}
setInterval(changeImage, 3000);
</script>
</body>
</html>
```
在这个示例中,我们首先定义了一个 `div` 元素,它的 `id` 为 `slider`,用于包含图片。然后定义了一些基本的 CSS 样式,包括将 `div` 元素设置为相对定位,设置宽度和高度,以及将 `img` 元素设置为绝对定位,并将它们的位置设置为左上角。还定义了两个类名 `active` 和 `inactive`,用于控制图片的显示和隐藏。
在 JavaScript 部分,我们首先使用 `document.querySelectorAll` 方法获取 `slider` 元素中所有的 `img` 元素,然后定义一个变量 `current`,用于跟踪当前显示的图片的索引。接着定义了一个名为 `changeImage` 的函数,用于切换图片。该函数会将当前显示的图片的类名设置为 `inactive`,然后将 `current` 变量加 1,再通过取模运算计算出下一张图片的索引,并将其类名设置为 `active`。最后,我们使用 `setInterval` 方法每隔 3 秒钟调用一次 `changeImage` 函数,从而实现图片轮播的效果。