用JavaScript写一个最简单的轮播图
时间: 2023-09-30 17:08:40 浏览: 53
好的,下面是一个最简单的 JavaScript 轮播图的示例代码:
HTML 代码:
```html
<div class="slideshow-container">
<img src="image1.jpg" class="slide">
<img src="image2.jpg" class="slide">
<img src="image3.jpg" class="slide">
</div>
```
CSS 代码:
```css
.slideshow-container {
position: relative;
height: 300px;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}
```
JavaScript 代码:
```javascript
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
const slideInterval = setInterval(nextSlide, 2000);
function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}
```
在这个示例中,我们使用了一个包含三张图片的轮播图。我们使用 CSS 的 `position: absolute` 属性使每张图片重叠在一起。我们通过 `opacity` 属性来实现淡入淡出的效果。在 JavaScript 中,我们实现了一个计时器来控制图片的显示和隐藏。每隔两秒钟,我们会隐藏当前图片并显示下一张图片。这样就实现了一个简单的轮播图。