移动手机APP手指滑动切换图片特效附源码下载

移动手机APP手指滑动切换图片特效是一种常见的图片展示方式。本攻略将提供完整的实现教程和附带源码下载，让读者能够轻松实现该特效。

实现步骤

1. 在 HTML 文件中添加 DOM 结构，其中包含图片容器和小圆点指示器：

   html
<div class="slider">
<div class="slider-wrapper">
<img src="image1.jpg" alt="图片1" />
<img src="image2.jpg" alt="图片2" />
<img src="image3.jpg" alt="图片3" />
<img src="image4.jpg" alt="图片4" />
</div>
<div class="slider-dots"></div>
</div>

2. 添加 CSS 样式，包括图片容器和指示器的样式：

   ```css
   .slider {
   position: relative;
   overflow: hidden;
   width: 100%;
   }

   .slider-wrapper {
   white-space: nowrap;
   transition: transform 300ms ease-out;
   display: flex;
   }

   .slider-wrapper img {
   width: 100%;
   }

   .slider-dots {
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   }

   .slider-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, .5);
   margin-right: 10px;
   cursor: pointer;
   }

   .slider-dot.active {
   background-color: rgba(0, 0, 0, .8);
   }
   ```

3. 添加 JavaScript 代码，实现手指滑动切换和指示器联动效果：

   ```javascript
   const slider = document.querySelector('.slider');
   const wrapper = document.querySelector('.slider-wrapper');
   const slides = Array.from(wrapper.children);
   const dots = document.querySelector('.slider-dots');
   const dotList = slides.map((_, index) => {
   const dot = document.createElement('div');
   dot.classList.add('slider-dot');
   if (index === 0) {
   dot.classList.add('active');
   }
   dots.appendChild(dot);
   return dot;
   });

   function moveToSlide(index) {
   wrapper.style.transform = translateX(-${index / slides.length * 100}%);
   dotList.forEach((dot, i) => {
   if(i === index) {
   dot.classList.add('active');
   } else {
   dot.classList.remove('active');
   }
   })
   }

   let curIndex = 0;
   let touchStartX = 0;
   let touchEndX = 0;
   slider.addEventListener('touchstart', (event) => {
   touchStartX = event.touches[0].clientX;
   })
   slider.addEventListener('touchend', (event) => {
   touchEndX = event.changedTouches[0].clientX;
   if (touchStartX - touchEndX > 50) {
   if (curIndex === slides.length - 1) {
   curIndex = 0;
   } else {
   curIndex++;
   }
   moveToSlide(curIndex);
   } else if (touchEndX - touchStartX > 50) {
   if (curIndex === 0) {
   curIndex = slides.length - 1
   } else {
   curIndex--;
   }
   moveToSlide(curIndex);
   }
   })
   ```

   代码分三个部分：第一部分是获取 DOM 对象；第二部分是根据图片数量生成指示器元素；第三部分是绑定触摸事件，实现手指滑动切换效果和联动指示器。

示例说明

以下是两个实例，分别展示了不同的图片展示效果：

示例1

实现水平滚动切换效果，类似于手机相册：

示例代码：https://codepen.io/easy-ly/pen/KKqaOzg

示例2

实现垂直滚动切换效果，类似于新闻头条：

示例代码：https://codepen.io/easy-ly/pen/VwKmRxK

两个示例均使用上述的 HTML 结构和 JS 样式，仅修改了 CSS 样式实现了不同的滑动方向。读者可以根据需要自行修改 CSS 样式实现不同的图片展示效果。