在移动端开发中，实现一个可以通过手指进行点击滑动的轮播图是非常常见的需求。通过JS实现这个功能可以提高用户体验和页面交互性。
前置知识
在开始编写代码之前，我们需要了解一些基本的前置知识：
touchstart：当手指触摸屏幕时触发该事件。touchmove：当手指在屏幕上滑动时触发该事件。touchend：当手指离开屏幕时触发该事件。touches：表示当前屏幕上所有的手指集合。changedTouches：表示最近一次触发该事件的手指集合。
实现思路
接下来我们来讲一下实现的思路。
获取轮播图容器和图片个数
首先，我们需要获取到轮播图容器和图片个数。在本文中，我们使用如下HTML结构：
<div class="carousel">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
</div>下面是获取轮播图容器和图片个数的代码：
const carousel = document.querySelector('.carousel');
const images = document.querySelectorAll('.carousel li');
const length = images.length;监听touch事件
我们需要监听touchstart、touchmove和touchend事件，以实现轮播图的点击滑动功能。
在touchstart事件中，我们记录下手指触摸屏幕的位置，并且停止轮播图自动播放。在touchmove事件中，我们计算手指滑动的距离并且移动轮播图。在touchend事件中，我们判断用户是向左滑动还是向右滑动，然后根据滑动方向和滑动距离来切换图片，并且恢复轮播图自动播放。
-- -------------------- ---- -------
--- ------ - -- -- -----------
--- ------ - --
--------------------------------------- - -- -
------ - ---------------------
------ - ---------------------
---
-------------------------------------- - -- -
----- ----- - --------------------------- - -------
----- ----- - --------------------------- - -------
-- ---------------- - ---------------- -
-------------------
------------------------ - -------------------- - ------ ------------------------
-
---
------------------------------------- - -- -
----- ---- - ----------------------------
----- ---- - ----------------------------
----- --------- - ---- - -------
----- --------- - ---- - -------
-- -------------------- - -------------------- -
-- ---------- - - -- ----- --- -- -
----- -- --
- ---- -- ---------- - - -- ----- --- ------ - -- -
----- -- --
-
---------------
-
---注意，在touchmove事件中，我们需要通过e.preventDefault()方法来阻止默认的滑动行为，以保证轮播图跟随手指滑动。同时，我们还需要记录当前滑动的距离并且实时更新轮播图的位置。
切换图片
最后，我们需要根据用户的滑动方向和滑动距离来切换图片。在示例代码中，我们使用了一个index变量来记录当前显示的图片的下标。
let index = 0; // 记录当前显示的图片的下标
function moveCarousel() {
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/969) ，转载请注明来源
[https://www.javascriptcn.com/post/969](https://www.javascriptcn.com/post/969)