用js写一个最简单的轮播图
时间: 2024-05-13 14:14:07 浏览: 8
好的,以下是一个简单的 JavaScript 轮播图实现:
HTML 代码:
```
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
```
CSS 代码:
```
.slider {
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
width: 100%;
height: 100%;
display: none;
}
```
JavaScript 代码:
```
const slider = document.querySelector('.slider');
const images = document.querySelectorAll('.slider img');
let current = 0;
function showImage() {
for (let i = 0; i < images.length; i++) {
images[i].style.display = 'none';
}
images[current].style.display = 'block';
}
function nextImage() {
current++;
if (current >= images.length) {
current = 0;
}
showImage();
}
setInterval(nextImage, 3000);
```
这个轮播图会每隔 3 秒自动切换一张图片,可以通过 CSS 样式来设置轮播图的大小和样式,也可以通过 JavaScript 代码来控制轮播图的行为。