原生JS实现移动端Touch轮播图

核心代码

function $(id){return document.getElementById(id);}
var isMove = false, // 判断是否滑动过
    startR = 0,    // 初始移动距离
    changeR = 0,  // 滑动距离，与startR比较，大于40px即为右滑 

// 绑定滑动事件
var box = $('your element id');
box.addEventListener('touchstart',function(e){
    startR = e.touches[0].clientX; 
});

box.addEventListener('touchmove',function(e){
    var moveR = e.touches[0].clientX;
    changeR = moveR - startR;
    isMove = true;
})

box.addEventListener('touchend',function(e){
    if (isMove&& Math.abs(changeR) > 30) {
        if (changeR < 0) {
            console.log('向右滑动');
            // do something here...
        } else {
            console.log('向左滑动');
            // do something here...
        }   
    }
})

HTML结构

结构上，还是用ul、li来存放轮播图片，ol、li来存放轮播小圆点：

<div class="fourth_carousel">
    <ul>
        <li><img src="assets/img/_third/meeting-1.jpg" alt=""></li>
        <li><img src="assets/img/_third/meeting-2.jpg" alt=""></li>
        <li><img src="assets/img/_third/meeting-1.jpg" alt=""></li>
    </ul>
    <ol class="points"></ol>
</div>

请输入图片描述

初始化样式

body,img,li,ol,ul{margin:0;padding:0}
li,ol,ul{list-style-type:none}
img{width:100%;height:auto;border:none;display:block;-ms-interpolation-mode:bicubic;//兼容IE图片失真}

请输入图片描述

添加样式

1 ) . 给ul外层的盒子一个相对定位；
2 ) . 这里的ul高度不能写死，它应该是li撑开的高度，但是由于li绝对定位，没办法撑开这个高度，所以这里的ul需要在js里面动态设置高度；
3 ) . 给li设置相对定位，并且left、top都为0，再给li添加一个transform:translateX(300%)属性，目的是初始化显示的图片为空，然后在js里只需要动态设置每个li的translateX值，即可实现轮播；
4 ) . 设置小圆点区域，因为小圆点个数未知，所以ol的宽度也未知，想要让一个未知宽度的盒子水平居中，可以使用absolute定位结合left百分比的方式实现；
5 ) . 给ol下面的li设置一个宽高添加圆角边框属性，并且左浮动，这样就能显示一排空心的小圆点了；
6 ) . 最后，添加一个样式类，里面设置一个背景属性，用来显示当前展示图片对应的小圆点。

.carousel{position:relative;overflow:hidden}
.carousel ul li{position:absolute;width:100%;left:0;top:0;-webkit-transform:translateX(300%);transform:translateX(300%)}
.carousel .points{position:absolute;left:50%;bottom:10px;transform:translateX(-50%)}
.carousel .points li{width:5px;height:5px;border-radius:50%;border:1px solid #fff;float:left;margin:0 2px}
.carousel .points li.active{background-color:#fff}

请输入图片描述

JS准备工作

1 ) . 给UL动态设置高度
2 ) . 动态生成小圆点（根据图片的张数创建小圆点个数，i=0 添加active）
3 ) . 初始化三个li的基本位置
4 ) . 定义三个变量，分别用来存储三个li的下（left存储最后一张图片的下标，center和right分别存储第一张和第二张的下标）
通过数组[下标]的方式给三个li设置定位后left方向的位置

var carousel = document.querySelector('.carousel');
var carouselUl = carousel.querySelector('ul');
var carouselLis = carouselUl.querySelectorAll('li');
var points = carousel.querySelector('ol');
// 屏幕的宽度（轮播图显示区域的宽度）
var screenWidth = document.documentElement.offsetWidth;
 
// 1- ul设置高度
carouselUl.style.height = carouselLis[0].offsetHeight + 'px';
 
// 2- 生成小圆点
for(var i = 0; i < carouselLis.length; i++){
  var li = document.createElement('li');
  if(i == 0){
    li.classList.add('active');
  }//
  points.appendChild(li);
}
 
// 3- 初始三个 li 固定的位置
var left = carouselLis.length - 1;
var center = 0;
var right = 1;
 
// 归位
carouselLis[left].style.transform = 'translateX('+ (-screenWidth) +'px)';
carouselLis[center].style.transform = 'translateX(0px)';
carouselLis[right].style.transform = 'translateX('+ screenWidth +'px)';

请输入图片描述

添加定时器

轮播图都会自己轮播，所以需要用到定时器，每隔一段时间执行一次轮转函数。

1 ) . 添加定时器，定时器里面轮转下标
2 ) . 极值判断
3 ) . 设置过渡（替补的那张不需要过渡）
4 ) . 归位
5 ) . 小圆点焦点联动

var timer = null;
// 调用定时器
timer = setInterval(showNext, 2000);
 
// 轮播图片切换
function showNext(){
  // 轮转下标
  left = center;
  center = right;
  right++;
  // 极值判断
  if(right > carouselLis.length - 1){
    right = 0;
  }
 
  //添加过渡
  carouselLis[left].style.transition = 'transform 1s';
  carouselLis[center].style.transition = 'transform 1s';
  // 右边的图片永远是替补的，不能添加过渡
  carouselLis[right].style.transition = 'none';
  // 归位
  carouselLis[left].style.transform = 'translateX('+ (-screenWidth) +'px)';
  carouselLis[center].style.transform = 'translateX(0px)';
  carouselLis[right].style.transform = 'translateX('+ screenWidth +'px)';
  // 自动设置小圆点
  setPoint();
}
 
// 动态设置小圆点的active类
var pointsLis = points.querySelectorAll('li');
function setPoint(){
  for(var i = 0; i < pointsLis.length; i++){
    pointsLis[i].classList.remove('active');
  }
  pointsLis[center].classList.add('active');
}

请输入图片描述

添加Touch 事件

1 ) . 分别绑定三个touch事件
touchstart里面记录手指的位置，清除定时器，记录时间
touchmove里面获取差值，同时清除过渡，累加上差值的值
touchend里面判断是否滑动成功，滑动的依据是滑动的距离（绝对值）
2 ) . 超过屏幕的三分之一或者滑动的时间小于300毫秒同时距离大于30（防止点击就跑）的时候都认为是滑动成功
3 ) . 在滑动成功的条件分支里面在判断滑动的方向，根据方向选择调用上一张还是下一张的逻辑
4 ) . 在滑动失败的条件分支里面添加上过渡，重新进行归位
5 ) . 重启定时器

var carousel = document.querySelector('.carousel');
var carouselUl = carousel.querySelector('ul');
var carouselLis = carouselUl.querySelectorAll('li');
var points = carousel.querySelector('ol');
// 屏幕的宽度
var screenWidth = document.documentElement.offsetWidth;
var timer = null;
 
// 设置 ul 的高度
carouselUl.style.height = carouselLis[0].offsetHeight + 'px';
 
// 动态生成小圆点
for (var i = 0; i < carouselLis.length; i++) {
  var li = document.createElement('li');
  if (i == 0) {
    li.classList.add('active');
  }
  points.appendChild(li);
}
 
// 初始三个固定的位置
var left = carouselLis.length - 1;
var center = 0;
var right = 1;
 
// 归位（多次使用，封装成函数）
setTransform();
 
// 调用定时器
timer = setInterval(showNext, 2000);
 
// 分别绑定touch事件
var startX = 0; // 手指落点
var startTime = null; // 开始触摸时间
carouselUl.addEventListener('touchstart', touchstartHandler); // 滑动开始绑定的函数 touchstartHandler
carouselUl.addEventListener('touchmove', touchmoveHandler);  // 持续滑动绑定的函数 touchmoveHandler
carouselUl.addEventListener('touchend', touchendHandeler);  // 滑动结束绑定的函数 touchendHandeler
 
// 轮播图片切换下一张
function showNext() {
  // 轮转下标
  left = center;
  center = right;
  right++;
  //　极值判断
  if (right > carouselLis.length - 1) {
    right = 0;
  }
  //添加过渡（多次使用，封装成函数）
  setTransition(1, 1, 0);
  // 归位
  setTransform();
  // 自动设置小圆点
  setPoint();
}
 
// 轮播图片切换上一张
function showPrev() {
  // 轮转下标
  right = center;
  center = left;
  left--;
  //　极值判断
  if (left < 0) {
    left = carouselLis.length - 1;
  }
  //添加过渡
  setTransition(0, 1, 1);
  // 归位
  setTransform();
  // 自动设置小圆点
  setPoint();
}
 
// 滑动开始
function touchstartHandler(e) {
  // 清除定时器
  clearInterval(timer);
  // 记录滑动开始的时间
  startTime = Date.now();
  // 记录手指最开始的落点
  startX = e.changedTouches[0].clientX;
}
// 滑动持续中
function touchmoveHandler(e) {
  // 获取差值 自带正负
  var dx = e.changedTouches[0].clientX - startX;
  // 干掉过渡
  setTransition(0, 0, 0);
  // 归位
  setTransform(dx);
}
//　滑动结束
function touchendHandeler(e) {
  // 在手指松开的时候，要判断当前是否滑动成功
  var dx = e.changedTouches[0].clientX - startX;
  // 获取时间差
  var dTime = Date.now() - startTime;
  // 滑动成功的依据是滑动的距离（绝对值）超过屏幕的三分之一 或者滑动的时间小于300毫秒同时滑动的距离大于30
  if (Math.abs(dx) > screenWidth / 3 || (dTime < 300 && Math.abs(dx) > 30)) {
    // 滑动成功了
    // 判断用户是往哪个方向滑
    if (dx > 0) {
      // 往右滑 看到上一张
      showPrev();
    } else {
      // 往左滑 看到下一张
      showNext();
    }
  } else {
    // 添加上过渡
    setTransition(1, 1, 1);
    // 滑动失败了
    setTransform();
  }
 
  // 重新启动定时器
  clearInterval(timer);
  // 调用定时器
  timer = setInterval(showNext, 2000);
}
// 设置过渡
function setTransition(a, b, c) {
  if (a) {
    carouselLis[left].style.transition = 'transform 1s';
  } else {
    carouselLis[left].style.transition = 'none';
  }
  if (b) {
    carouselLis[center].style.transition = 'transform 1s';
  } else {
    carouselLis[center].style.transition = 'none';
  }
  if (c) {
    carouselLis[right].style.transition = 'transform 1s';
  } else {
    carouselLis[right].style.transition = 'none';
  }
}
 
//　封装归位
function setTransform(dx) {
  dx = dx || 0;
  carouselLis[left].style.transform = 'translateX(' + (-screenWidth + dx) + 'px)';
  carouselLis[center].style.transform = 'translateX(' + dx + 'px)';
  carouselLis[right].style.transform = 'translateX(' + (screenWidth + dx) + 'px)';
}
// 动态设置小圆点的active类
var pointsLis = points.querySelectorAll('li');
 
function setPoint() {
  for (var i = 0; i < pointsLis.length; i++) {
    pointsLis[i].classList.remove('active');
  }
  pointsLis[center].classList.add('active');
}

请输入图片描述

原文链接：https://segmentfault.com/a/1190000017739316

文章目录

原生JS实现移动端Touch轮播图

核心代码

HTML结构

初始化样式

添加样式

JS准备工作

添加定时器

添加Touch 事件

添加新评论

最近回复

标签

链接