html图片轮播上下滚动
时间: 2023-07-05 08:25:04 浏览: 130
要在HTML页面中实现图片轮播上下滚动,你可以使用CSS的动画和JavaScript的组合。下面是一个简单的例子:
HTML部分:
```
<div class="slider">
<ul class="slider-container">
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
</div>
```
CSS部分:
```
.slider {
height: 400px;
overflow: hidden;
}
.slider-container {
list-style: none;
padding: 0;
margin: 0;
position: relative;
animation: slide 10s infinite;
}
.slider-container li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.slider-container li:first-child {
opacity: 1;
}
.slider-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slide {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-100%);
}
50% {
transform: translateY(-200%);
}
75% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
```
JavaScript部分:
```
const sliderContainer = document.querySelector('.slider-container');
const slideLength = sliderContainer.children.length;
for (let i = 0; i < slideLength; i++) {
sliderContainer.children[i].style.animationDelay = `${i * 2}s`;
}
```
这个例子中创建了一个包含三张图片的幻灯片,通过上下滚动的方式进行切换。使用CSS的动画和transform属性来实现上下滚动的效果。JavaScript部分通过为每个幻灯片设置不同的动画延迟时间,来实现图片上下滚动的错落感。