帮我写一个JavaScript轮播图,能左右切换能自动播放
时间: 2024-01-15 14:03:26 浏览: 24
当然可以!以下是一个带有左右切换和自动播放功能的JavaScript轮播图代码示例:
HTML:
```html
<div class="slider">
<div class="slider-wrapper">
<div class="slider-item active">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slider-item">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slider-item">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<div class="slider-controls">
<button class="prev-btn">❮</button>
<button class="next-btn">❯</button>
</div>
</div>
```
CSS:
```css
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slider-wrapper {
display: flex;
width: 300%;
}
.slider-item {
flex: 1;
}
.slider-item.active {
opacity: 1;
transition: opacity 1s ease;
}
.slider-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.prev-btn,
.next-btn {
background: none;
border: none;
font-size: 24px;
color: #fff;
cursor: pointer;
transition: opacity 0.3s ease;
}
.prev-btn:hover,
.next-btn:hover {
opacity: 0.7;
}
```
JavaScript:
```javascript
const slider = document.querySelector('.slider');
const slides = slider.querySelectorAll('.slider-item');
const prevBtn = slider.querySelector('.prev-btn');
const nextBtn = slider.querySelector('.next-btn');
let currentSlide = 0;
function showSlide(n) {
slides[currentSlide].classList.remove('active');
slides[n].classList.add('active');
currentSlide = n;
}
function nextSlide() {
let next = currentSlide + 1;
if (next >= slides.length) {
next = 0;
}
showSlide(next);
}
function prevSlide() {
let prev = currentSlide - 1;
if (prev < 0) {
prev = slides.length - 1;
}
showSlide(prev);
}
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
setInterval(nextSlide, 3000);
```
这个轮播图会自动循环播放图片,每张图片停留时间为3秒钟,你可以根据需要修改这些时间。同时,你也可以根据需要修改按钮的样式和位置。