写一个上下滑动的轮播图
时间: 2024-05-06 11:17:59 浏览: 15
这里提供一种基于HTML、CSS、JS的上下滑动轮播图实现方法:
1. HTML结构
```html
<div class="slider-container">
<div class="slider">
<div class="slide">
<img src="image1.jpg" alt="image1">
</div>
<div class="slide">
<img src="image2.jpg" alt="image2">
</div>
<div class="slide">
<img src="image3.jpg" alt="image3">
</div>
</div>
</div>
```
2. CSS样式
```css
.slider-container {
position: relative;
overflow: hidden;
width: 100%;
height: 400px;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
}
.slide {
width: 100%;
height: 100%;
flex-shrink: 0;
overflow: hidden;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
```
3. JS交互
```javascript
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const slideHeight = slides[0].clientHeight;
let currentSlide = 1;
function slideUp() {
if (currentSlide === slides.length - 1) return;
currentSlide++;
slider.style.transform = `translateY(-${currentSlide * slideHeight}px)`;
}
function slideDown() {
if (currentSlide === 0) return;
currentSlide--;
slider.style.transform = `translateY(-${currentSlide * slideHeight}px)`;
}
setInterval(slideUp, 3000);
```
以上代码通过设置容器的`overflow`属性为`hidden`来隐藏溢出部分,设置轮播图容器的`position`属性为`relative`,并设置轮播图的`position`属性为`absolute`,使其脱离文档流并覆盖在容器上面,然后通过`transform`属性的`translateY`值来实现上下滑动的效果。
通过`setInterval`定时器来控制轮播图的自动播放,通过`currentSlide`变量来记录当前轮播图的位置,每次点击上下箭头或者自动轮播时,改变`translateY`的值来更新轮播图位置。
另外,需要注意的是,轮播图容器的高度需要根据轮播图的高度和数量进行计算,并设置为固定值,否则轮播图容器的高度会随着轮播图位置的变化而改变,出现抖动等问题。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)