Bootstrap中手指控制轮播图切换

通过手指的滑动来控制轮播图中的图片内容的切换

  // 1. 获取手指在轮播图元素上的一个滑动方向（左右）

  // 获取界面上的轮播图容器

  var $carousels = $('.carousel');

  var startX, endX;

  var offset = 50;  //设置滑动的偏移量

  // 注册滑动事件

  $carousels.on('touchstart', function(e) {

    // 手指触摸开始时记录一下手指所在的坐标X

    startX = e.originalEvent.touches[0].clientX;

    // console.log(startX);

  });

  $carousels.on('touchmove', function(e) {

    // 变量重复赋值

    endX = e.originalEvent.touches[0].clientX;

    // console.log(endX);

  });

  $carousels.on('touchend', function(e) {

    console.log(e);

    // 结束触摸一瞬间记录最后的手指所在坐标X

    // 比大小

    // console.log(endX);

    // 控制精度

    // 获取每次运动的距离，当距离大于一定值时认为是有方向变化

    var distance = Math.abs(startX - endX);

    if (distance > offset) {

      // 有方向变化

      // console.log(startX > endX ? '←' : '→');

      // 2. 根据获得到的方向选择上一张或者下一张

      //     - $('a').click();

      //     - 原生的carousel方法实现 http://v3.bootcss.com/javascript/#carousel-methods

      $(this).carousel(startX > endX ? 'next' : 'prev');

    }

  });

倒数第三行的代码中使用$(this)  原因在于通过var $carousels = $('.carousel');可以获取到页面中的全部的轮播图，this用来指示更改当前触发的轮播图。