仅用html三张图片自动轮播
时间: 2023-07-05 13:34:25 浏览: 53
可以使用HTML和CSS实现自动轮播效果。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>自动轮播</title>
<style>
.slideshow {
position: relative;
max-width: 1000px;
margin: auto;
}
.slideshow img {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
.slideshow img:first-child {
display: block;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slideshow")[0].getElementsByTagName("img");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000);
}
</script>
</body>
</html>
```
在这个示例中,我们使用了一个名为 `slideshow` 的 div 来包含所有的图片。我们使用了 CSS 来设置了这个 div 的位置和大小,并把所有的图片的位置设置为绝对定位,并调整了它们的居中方式,以便它们始终居中显示。
然后,我们使用 JavaScript 来实现了自动轮播的功能。我们定义了一个 `showSlides()` 函数,该函数会在每隔3秒钟切换到下一张图片。我们还定义了一个 `slideIndex` 变量来跟踪当前正在显示的图片。
在 `showSlides()` 函数中,我们获取了所有的图片元素,并将它们的 `display` 样式设置为 `none`,以便隐藏它们。然后,我们将 `slideIndex` 变量增加1,并检查它是否大于了图片元素的数量。如果是,我们将 `slideIndex` 变量重置为1。然后,我们将当前图片的 `display` 样式设置为 `block`,以便显示它。最后,我们使用 `setTimeout()` 函数来在3秒钟后重新调用 `showSlides()` 函数,以便切换到下一张图片。
这样,我们就实现了一个简单的自动轮播效果,只使用了 HTML 和 CSS。