用JavaScript写一个图片轮播
时间: 2023-12-29 09:45:16 浏览: 28
当然可以! 你可以使用 JavaScript 和 HTML 和 CSS 来编写图片轮播。
这里有一个简单的示例,可以在浏览器中运行:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义图片的样式 */
.slideshow img {
width: 100%;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>
<script>
var slideIndex = 0;
var slides = document.querySelectorAll(".slideshow img");
var dots = [];
var timer = null;
function showSlides() {
// 隐藏所有图片
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
// 如果已经到最后一张图片,重新开始
if (slideIndex > slides.length) {
slideIndex = 1;
}
// 显示当前图片
slides[slideIndex - 1].style.display = "block";
timer = setTimeout(showSlides, 2000); //每 2 秒换一张图片
}
// 开始轮播
showSlides();
</script>
</body>
</html>
```
这个示例实现了一个最简单的图片轮播,它会在页面加载后自动显示图片,每 2 秒切换到下一张图片。
这个示例中的图片放在HTML中, 但是如果想要动态加载图片, 你可以通过 `JavaScript` 和 `fetch()` 或 `XMLHttpRequest()` 加载图片。
希望这个示例能帮助你开始实现你的图片轮播。