移动端图片左右切换效果
时间: 2023-07-20 21:06:14 浏览: 44
移动端图片左右切换效果可以使用swiper.js插件实现。下面是一个简单的示例代码:
HTML代码:
```
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img1.jpg"></div>
<div class="swiper-slide"><img src="img2.jpg"></div>
<div class="swiper-slide"><img src="img3.jpg"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
```
CSS代码:
```
.swiper-container {
width: 100%;
height: 300px;
position: relative;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-button-next,
.swiper-button-prev {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
cursor: pointer;
}
.swiper-button-next {
right: 10px;
background: url("next.png") no-repeat center center;
}
.swiper-button-prev {
left: 10px;
background: url("prev.png") no-repeat center center;
}
```
JS代码:
```
var mySwiper = new Swiper('.swiper-container', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
```
需要注意的是,这里的样式和图片资源需要根据实际情况进行调整。