用JS代码写一个网页轮播图
时间: 2023-10-01 11:02:10 浏览: 59
好的,以下是一个基于 JavaScript 的网页轮播图的代码实现:
HTML 代码:
```html
<div class="slider">
<img src="image1.jpg" alt="Image 1" />
<img src="image2.jpg" alt="Image 2" />
<img src="image3.jpg" alt="Image 3" />
</div>
```
CSS 代码:
```css
.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img:first-child {
opacity: 1;
}
```
JavaScript 代码:
```javascript
const slider = document.querySelector('.slider');
const images = document.querySelectorAll('.slider img');
let index = 0;
function changeImage() {
index++;
if (index === images.length) {
index = 0;
}
images.forEach(image => image.style.opacity = 0);
images[index].style.opacity = 1;
}
setInterval(changeImage, 5000);
```
上述代码实现了一个简单的轮播图,图片自动轮播,每隔 5 秒钟切换一张图片。你需要将图片文件名替换成你自己的图片文件名。如果你想要有更多的控制,可以在 JavaScript 代码中添加事件监听器,实现手动切换图片等功能。