写一个原生js轮播图左右滑动
时间: 2023-09-09 19:10:07 浏览: 55
以下是一个简单的原生JS实现的轮播图左右滑动的示例:
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">Prev</button>
<button class="next-btn">Next</button>
</div>
</div>
```
CSS代码:
```css
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slider-wrapper {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
display: flex;
transition: transform 0.5s ease;
}
.slider-item {
width: 33.33%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slider-item img {
max-width: 100%;
max-height: 100%;
}
.slider-item.active {
transform: translateX(0%);
}
.slider-item.prev {
transform: translateX(-100%);
}
.slider-item.next {
transform: translateX(100%);
}
.slider-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.slider-controls button {
font-size: 16px;
padding: 10px 20px;
margin: 0 10px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
```
JavaScript代码:
```javascript
var slider = document.querySelector('.slider');
var sliderWrapper = slider.querySelector('.slider-wrapper');
var sliderItems = slider.querySelectorAll('.slider-item');
var prevBtn = slider.querySelector('.prev-btn');
var nextBtn = slider.querySelector('.next-btn');
var currentSlide = 0;
function slideTo(slide) {
if (slide < 0) {
slide = sliderItems.length - 1;
} else if (slide >= sliderItems.length) {
slide = 0;
}
sliderItems.forEach(function(item) {
item.classList.remove('active', 'prev', 'next');
});
if (slide === currentSlide) {
sliderItems[slide].classList.add('active');
} else if (slide < currentSlide) {
sliderItems[slide].classList.add('prev');
sliderItems[currentSlide].classList.add('next');
} else {
sliderItems[slide].classList.add('next');
sliderItems[currentSlide].classList.add('prev');
}
currentSlide = slide;
}
prevBtn.addEventListener('click', function() {
slideTo(currentSlide - 1);
});
nextBtn.addEventListener('click', function() {
slideTo(currentSlide + 1);
});
slideTo(0);
```
上述代码实现了一个简单的轮播图,包含三个图片。用户可以通过点击“Prev”和“Next”按钮来切换图片。这里使用了CSS3的`transform`属性和`transition`属性来实现图片的滑动动画。JavaScript代码中的`slideTo`函数用于计算出要滑动到的图片位置,然后根据当前位置和目标位置来判断每个图片应该添加哪些类名以及实现相应的动画效果。