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

/* 动态设置过渡 */
var addTransition = function (ele) {
 ele.style.transition = "all .6s";
 ele.style.webkitTransition = "all .6s";
};
/* 移除过渡效果 */
var removeTransition = function (ele) {
 ele.style.transition = "none";
 ele.style.webkitTransition = "none";
};
/* 设置容器平移 -- 也就是滑动动画 
 ele:当前元素
 xwidth:平移的距离
*/
var setTranslateX = function (ele, xwidth) {
 ele.style.transform = "translateX(" + xwidth + "px)";
 ele.style.webkitTransform = "translateX(" + xwidth + "px)";
}

var banner = function () {
 /** 轮播图分析 */
 /** 1 自动轮播且无缝 [定时器、过渡动画]
 * 2 点要随着图片的轮播而改变 [根据索引切换]
 * 3 滑动效果 [touch事件]
 * 4 图片随着点而变化
 * 5 滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去 [过渡]
 * 6 滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换 [滑动方向 + 过渡]]
 */
 var timer = ''
 /* 封装定时器函数 */
 var startInterval = function () {
 timer = setInterval(function () {
  index++;// 基于索引 做位移
  addTransition(imgBox); // 为轮播图片组的ul设置过渡函数
  setTranslateX(imgBox, -index * width);// 根据当前索引值计算平移的距离
 }, 2000);
 }
 var banner = document.querySelector(".jd_banner");
 var width = banner.offsetWidth; // 屏幕的宽度
 var imgBox = banner.querySelector("ul:first-child"); // 轮播图片ul
 var length = imgBox.querySelectorAll("li").length; // 图片的个数
 var pointBox = banner.querySelector("ul:last-child");// 分页器ul
 var points = pointBox.querySelectorAll("li");// 分页器集合

 var index = 1; // 初始化索引，由于要无缝衔接，索引从1开始
 startInterval();
 
 /* transitionend事件：当元素过渡动画结束后执行
 每次轮播动画结束后，判断当前索引值
 */
 imgBox.addEventListener("transitionend", function () {
 if (index >= length - 1) {
  index = 1;
  // 清过渡，瞬间定位imgBox 
  removeTransition(imgBox);
  setTranslateX(imgBox, -index * width);
 }
 // 滑动的时候也需要无缝
 else if (index <= 0) {
  index = 8;
  removeTransition(imgBox);
  setTranslateX(imgBox, -index * width);
 }
 showPoint(index - 1); // 改变分页器状态
 });

 var showPoint = function (index) {
 for (var i = 0; i  width / 3) {
  // 切换
  if (distanceX > 0) {
   // 上一张
   index = index - 1;
  } else {
   // 下一张
   index = index + 1;
  }
  addTransition(imgBox); // 设置过渡动画
  setTranslateX(imgBox, -index * width);
  if (index >= 9) {
   index = 1;
  }
  if (index <= 0) {
   index = 8;
  }
  showPoint(index - 1);

  } else {
  // 不满足滑动条件，回退到之前的状态
  addTransition(imgBox);
  setTranslateX(imgBox, -index * width);
  showPoint(index - 1);
  }
 }
 // **** 最好做一次参数的重置
 startX = 0;
 distanceX = 0;
 isMove = false;
 // ****** 为了严谨，再清一次定时器
 clearInterval(timer)
 // 加上定时器
 startInterval();
 });
};