js轮播图实现简单代码
时间: 2023-12-18 11:50:24 浏览: 34
以下是一个简单的 JavaScript 轮播图实现代码:
HTML 代码:
```html
<div class="slideshow-container">
<div class="slide">
<img src="image1.jpg">
</div>
<div class="slide">
<img src="image2.jpg">
</div>
<div class="slide">
<img src="image3.jpg">
</div>
</div>
<button class="prev" onclick="prevSlide()">Previous</button>
<button class="next" onclick="nextSlide()">Next</button>
```
CSS 代码:
```css
.slideshow-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in;
}
.slide.active {
opacity: 1;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
font-weight: bold;
padding: 10px;
border: none;
background-color: #ddd;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript 代码:
```javascript
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function showSlide(n) {
slides[currentSlide].classList.remove('active');
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].classList.add('active');
}
function prevSlide() {
showSlide(currentSlide - 1);
}
function nextSlide() {
showSlide(currentSlide + 1);
}
showSlide(currentSlide);
```
这个例子中,我们使用了一个包含了三张幻灯片的容器,利用 JavaScript 实现了点击左右箭头时切换幻灯片的效果。其中,showSlide() 函数用于显示指定位置的幻灯片,prevSlide() 函数和 nextSlide() 函数分别用于向前和向后切换幻灯片。我们使用 currentSlide 变量来记录当前显示的幻灯片位置。在页面加载完成后,调用 showSlide() 函数显示第一张幻灯片。