用js设计一个简单的轮播图
时间: 2023-12-30 22:02:25 浏览: 21
好的,以下是一个简单的轮播图设计,使用JavaScript实现:
HTML代码:
```html
<div class="slider">
<img src="img1.jpg" alt="image1">
<img src="img2.jpg" alt="image2">
<img src="img3.jpg" alt="image3">
</div>
```
CSS代码:
```css
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.slider img.active {
opacity: 1;
}
```
JavaScript代码:
```javascript
// 获取轮播图
const slider = document.querySelector('.slider');
// 获取轮播图中的图片
const images = document.querySelectorAll('.slider img');
// 定义变量保存当前显示的图片
let currentImage = 0;
// 显示第一张图片
images[currentImage].classList.add('active');
// 自动播放
setInterval(() => {
// 隐藏当前的图片
images[currentImage].classList.remove('active');
// 显示下一张图片
currentImage = (currentImage + 1) % images.length;
images[currentImage].classList.add('active');
}, 3000);
```
以上是一个简单的轮播图设计,需要注意的是,CSS部分需要设置图片的宽度和高度,并且使用绝对定位将图片叠加在一起,JavaScript部分需要使用定时器实现自动播放,并且需要注意切换图片时的过渡效果。