js实现移动端轮播图滑动切换

下面是实现移动端轮播图滑动切换的完整攻略：

一、创建HTML结构

首先需要在HTML文件中创建好轮播图的结构，一般是使用<ul>和<li>标签来实现。每张轮播图使用一项<li>，其中应该包含图片和对应的说明文字，例如：

<div id="slider">
  <ul class="slider-list">
    <li>
      <img src="image-1.jpg" alt="图片1">
      <p>图片1的说明文字</p>
    </li>
    <li>
      <img src="image-2.jpg" alt="图片2">
      <p>图片2的说明文字</p>
    </li>
    <li>
      <img src="image-3.jpg" alt="图片3">
      <p>图片3的说明文字</p>
    </li>
    <!-- 更多的轮播图项 -->
  </ul>
</div>

二、CSS布局样式

接下来需要设置轮播图的样式，包括容器的宽高、图片和文字的大小等。另外，为了实现轮播效果，需要使用绝对定位将所有轮播图项叠放在一起，并设置父元素的overflow:hidden属性，例如：

#slider {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.slider-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider-list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.slider-list li:first-child {
  display: block;
}
.slider-list img {
  width: 100%;
  height: 100%;
}
.slider-list p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  margin: 0;
}

其中，将.slider-list li的display属性设置为none，将第一个轮播图项的display属性设置为block，以此来实现轮播图的切换。

三、JS实现轮播切换

为了实现轮播图的滑动切换效果，需要使用JS监听触摸事件，并计算出滑动距离和速度，最终完成轮播图的切换。

下面是JS代码示例：

// 获取轮播容器和轮播项
var slider = document.getElementById('slider');
var sliderList = document.querySelector('.slider-list');
var sliderItems = document.querySelectorAll('.slider-list li');

// 初始化轮播状态
var curIndex = 0;
var startX = 0;
var startTime = 0;
var moveX = 0;
var moveTime = 0;
var isLoading = false;

// 监听触摸事件
slider.addEventListener('touchstart', function(e) {
  startX = e.touches[0].pageX;
  startTime = Date.now();
  isLoading = true;
});
slider.addEventListener('touchmove', function(e) {
  if (!isLoading) {
    return;
  }
  moveX = e.touches[0].pageX - startX;
  sliderList.style.left = -curIndex*slider.offsetWidth + moveX + 'px';
});
slider.addEventListener('touchend', function(e) {
  if (!isLoading) {
    return;
  }
  moveTime = Date.now() - startTime;
  if (moveX < -50 && moveTime < 300) { // 判断快速向左滑动
    curIndex++;
    if (curIndex >= sliderItems.length) {
      curIndex = 0;
    }
  } else if (moveX > 50 && moveTime < 300) { // 判断快速向右滑动
    curIndex--;
    if (curIndex < 0) {
      curIndex = sliderItems.length - 1;
    }
  }
  isLoading = false;
  sliderList.style.left = -curIndex*slider.offsetWidth + 'px'; // 切换到新轮播图项
});

在JS代码中，首先获取轮播容器、轮播项等元素，然后初始化一些轮播状态变量，包括当前轮播图的索引、触摸开始时的X坐标、触摸开始时间、触摸移动距离、触摸移动时间、是否正在加载等。接着，使用addEventListener()函数监听touchstart、touchmove和touchend事件，并在事件中计算出滑动距离和速度，并根据速度和方向计算出当前应该切换到的轮播图项。

最后，判断轮播方向和滑动速度是否达到一定的条件，如果符合要求，则切换到新的轮播图项。在切换到新轮播图项时，需要将sliderList的left属性设置为-curIndex*slider.offsetWidth，以此来实现切换到新的轮播图项。

以上就是实现移动端轮播图滑动切换的完整攻略，希望对你有所帮助。