写一个SE6轮播图自动轮播左右按钮
时间: 2023-12-11 13:51:26 浏览: 30
以下是一个使用ES6编写的轮播图,包括左右自动轮播按钮:
```
class Carousel {
constructor(options) {
this.container = options.container;
this.slides = options.slides;
this.interval = options.interval || 2000;
this.currentSlide = 0;
this.render();
this.autoSlide();
this.addEventListeners();
}
render() {
this.container.innerHTML = `
<div class="carousel__slides">
${this.slides.map(slide => `
<div class="carousel__slide">
<img src="${slide}" alt="slide">
</div>
`).join('')}
</div>
<button class="carousel__btn carousel__btn--prev">Prev</button>
<button class="carousel__btn carousel__btn--next">Next</button>
`;
}
autoSlide() {
this.intervalId = setInterval(() => {
this.currentSlide++;
if (this.currentSlide === this.slides.length) {
this.currentSlide = 0;
}
this.showSlide(this.currentSlide);
}, this.interval);
}
showSlide(slideIndex) {
const slides = this.container.querySelectorAll('.carousel__slide');
const prevSlide = slides[this.currentSlide - 1] || slides[slides.length - 1];
const currentSlide = slides[slideIndex];
prevSlide.classList.remove('active');
currentSlide.classList.add('active');
this.currentSlide = slideIndex;
}
addEventListeners() {
const prevBtn = this.container.querySelector('.carousel__btn--prev');
const nextBtn = this.container.querySelector('.carousel__btn--next');
prevBtn.addEventListener('click', () => {
this.currentSlide--;
if (this.currentSlide < 0) {
this.currentSlide = this.slides.length - 1;
}
this.showSlide(this.currentSlide);
});
nextBtn.addEventListener('click', () => {
this.currentSlide++;
if (this.currentSlide === this.slides.length) {
this.currentSlide = 0;
}
this.showSlide(this.currentSlide);
});
}
}
const carousel = new Carousel({
container: document.querySelector('.carousel'),
slides: [
'https://picsum.photos/800/400/?image=1084',
'https://picsum.photos/800/400/?image=1074',
'https://picsum.photos/800/400/?image=1064',
'https://picsum.photos/800/400/?image=1054',
'https://picsum.photos/800/400/?image=1044'
],
interval: 3000
});
```
HTML代码:
```
<div class="carousel"></div>
```
CSS代码:
```
.carousel {
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
}
.carousel__slides {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s;
}
.carousel__slide.active {
opacity: 1;
}
.carousel__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: rgba(0, 0, 0, .5);
border: none;
outline: none;
cursor: pointer;
}
.carousel__btn--prev {
left: 0;
}
.carousel__btn--next {
right: 0;
}
```