移动端触摸左右切换图片
时间: 2023-07-20 16:06:14 浏览: 104
你可以使用一些现成的移动端触摸滑动插件来实现左右切换图片的功能,比如Swipe、TouchSwipe、iScroll等等。这些插件都可以通过监听 touchstart、touchmove、touchend 等事件来实现图片的滑动效果。下面是一个使用 Swipe 插件实现左右切换图片的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swipe Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg"></div>
<div class="swiper-slide"><img src="image2.jpg"></div>
<div class="swiper-slide"><img src="image3.jpg"></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
});
</script>
</body>
</html>
```
这里使用了 Swipe 插件,通过使用 `Swiper` 对象来初始化一个轮播图,其中 `pagination` 表示分页器,`navigation` 表示导航按钮,`loop` 表示循环轮播,`autoplay` 表示自动播放。在移动端触摸滑动时,插件会自动切换图片,非常方便。
阅读全文