不用css三张图片自动轮播
时间: 2023-07-25 09:30:18 浏览: 39
不使用 CSS 实现自动轮播也是可以的,可以使用 JavaScript 来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>自动轮播</title>
</head>
<body>
<img id="slide" src="image1.jpg">
<script>
var slideIndex = 1;
showSlides();
function showSlides() {
var slide = document.getElementById("slide");
if (slideIndex == 1) {
slide.src = "image1.jpg";
} else if (slideIndex == 2) {
slide.src = "image2.jpg";
} else if (slideIndex == 3) {
slide.src = "image3.jpg";
}
slideIndex++;
if (slideIndex > 3) {
slideIndex = 1;
}
setTimeout(showSlides, 3000);
}
</script>
</body>
</html>
```
在这个示例中,我们使用了一个名为 `slide` 的 img 元素来显示图片。我们定义了一个 `slideIndex` 变量来跟踪当前正在显示的图片,初始值为1。
然后,我们定义了一个 `showSlides()` 函数,该函数会在每隔3秒钟切换到下一张图片。在函数内部,我们首先获取 `slide` 元素,然后根据 `slideIndex` 变量的值来设置 `slide` 元素的 `src` 属性,以便显示当前的图片。然后,我们将 `slideIndex` 变量增加1,并检查它是否大于了3。如果是,我们将 `slideIndex` 变量重置为1。最后,我们使用 `setTimeout()` 函数来在3秒钟后重新调用 `showSlides()` 函数,以便切换到下一张图片。
这样,我们就实现了一个简单的自动轮播效果,只使用了 HTML 和 JavaScript。