JS仿京东移动端手指拨动切换轮播图效果

下面是总体的攻略：

1. 需求分析

首先需要明确需求，也就是要实现一个仿京东移动端的轮播图效果。该效果的主要特点有：

手指拖动轮播图时，图片可以随着手指滑动而跟随移动，并在释放时自动定到下一个或上一个轮播图。
轮播图可以自动循环播放
底部的小圆点可以随着轮播图的切换而同步更新

2. 技术选型

实现这个效果需要使用以下技术：

HTML、CSS、JavaScript
jQuery
Hammer.js（一个常用的移动端手势库）

3. 实现步骤

3.1 HTML结构

首先需要定义HTML结构，基本上就是一个容器，里面包含了不同的轮播图和底部的小圆点。示例如下：

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img src="img1.jpg"></li>
    <li class="slider-item"><img src="img2.jpg"></li>
    <li class="slider-item"><img src="img3.jpg"></li>
  </ul>
  <ul class="slider-dots">
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
  </ul>
</div>

3.2 CSS样式

接下来是CSS样式的设置，包括容器的宽高，轮播图的宽度和位置，以及小圆点的样式等。这里不再赘述。示例如下：

.slider {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.slider .slider-wrapper {
  width: 300%;
  height: 100%;
  position: relative;
  left: -100%;
}
.slider .slider-item {
  float: left;
  width: 33.333%;
  height: 100%;
  position: relative;
}
.slider .slider-item img {
  width: 100%;
  height: 100%;
}
.slider .slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.slider .slider-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
}
.slider .slider-dot.active {
  background-color: #f00;
}

3.3 JavaScript代码

最后是JavaScript代码的编写，包括了自动轮播和手势拖动效果的实现。示例如下：

$(function() {
  var $sliderWrap = $('.slider-wrapper');
  var $sliderItems = $('.slider-item');
  var $sliderDots = $('.slider-dot');

  var slider = {
    len: $sliderItems.length,
    curIdx: 0,
    fromIdx: 0,
    toIdx: 0,
    isAnimating: false,
    autoPlayTimer: null,

    init: function() {
      var _this = this;

      // 初始化轮播图显示
      $sliderWrap.css('left', '-100%');
      $sliderItems.eq(0).clone().appendTo($sliderWrap);
      $sliderItems.eq(-1).clone().prependTo($sliderWrap);

      // 初始化小圆点
      $sliderDots.eq(0).addClass('active');
      $sliderDots.on('click', function() {
        var idx = $(this).index();
        _this.toIdx = idx;
        _this.move();
      });

      // 自动轮播
      this.autoPlay();

      // 手势操作
      this.bindTouchEvents();
    },

    autoPlay: function() {
      var _this = this;
      clearInterval(this.autoPlayTimer);
      this.autoPlayTimer = setInterval(function() {
        _this.toNext();
      }, 3000);
    },

    toNext: function() {
      this.toIdx = this.curIdx + 1;
      this.move();
    },

    toPrev: function() {
      this.toIdx = this.curIdx - 1;
      this.move();
    },

    move: function() {
      var _this = this;

      if (_this.isAnimating) {
        return;
      }

      _this.isAnimating = true;

      // 修改小圆点
      $sliderDots.eq(_this.curIdx).removeClass('active');
      $sliderDots.eq(_this.toIdx).addClass('active');

      // 目标位置
      var toPos = -(_this.toIdx + 1) * 100 / (_this.len + 2) + '%';

      // 动画移动
      $sliderWrap.animate({ left: toPos }, 500, function() {
        // 判断是否需要重置轮播图位置
        if (_this.toIdx >= _this.len) {
          $sliderWrap.css('left', '-100%');
          _this.curIdx = 0;
          _this.fromIdx = 0;
          _this.toIdx = 0;
        } else if (_this.toIdx < 0) {
          $sliderWrap.css('left', -(_this.len * 100 / (_this.len + 2)) + '%');
          _this.curIdx = _this.len - 1;
          _this.fromIdx = _this.len - 1;
          _this.toIdx = _this.len - 1;
        } else {
          _this.curIdx = _this.toIdx;
          _this.fromIdx = _this.toIdx;
        }
        _this.isAnimating = false;
      });
    },

    bindTouchEvents: function() {
      var _this = this;

      // 使用Hammer.js绑定手势事件
      var hammer = new Hammer($('.slider')[0]);
      hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 20 });

      hammer.on('swipeleft', function() {
        _this.toNext();
      });

      hammer.on('swiperight', function() {
        _this.toPrev();
      });

      hammer.on('panstart', function() {
        clearInterval(_this.autoPlayTimer);
        $sliderWrap.stop(true, true);
      });

      hammer.on('panmove', function(e) {
        var delta = e.deltaX / $(window).width();
        $sliderWrap.css('left', -(_this.curIdx + 1 - delta) * 100 / (_this.len + 2) + '%');
      });

      hammer.on('panend', function(e) {
        if (e.deltaX / $(window).width() > 0.2) {
          _this.toPrev();
        } else if (e.deltaX / $(window).width() < -0.2) {
          _this.toNext();
        } else {
          _this.move();
        }
        _this.autoPlay();
      });
    }
  }

  slider.init();
});

4. 示例说明

示例1：增加新的轮播图

通过修改HTML结构，将新轮播图img4.jpg添加到列表中：

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img src="img1.jpg"></li>
    <li class="slider-item"><img src="img2.jpg"></li>
    <li class="slider-item"><img src="img3.jpg"></li>
    <li class="slider-item"><img src="img4.jpg"></li>
  </ul>
  <ul class="slider-dots">
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
  </ul>
</div>

然后在CSS中修改轮播图包裹元素的宽度和轮播图item的宽度为25%：

.slider .slider-wrapper {
  width: 400%;
  height: 100%;
  position: relative;
  left: -100%;
}
.slider .slider-item {
  float: left;
  width: 25%;
  height: 100%;
  position: relative;
}

最后刷新页面，可以看到新增的轮播图以及底部的小圆点已经同步更新。

示例2：关闭自动播放功能

通过注释掉轮播图对象slider对象的autoPlay()方法即可。

slider.init();
// slider.autoPlay();

然后刷新页面，可以发现轮播图不再自动播放。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS仿京东移动端手指拨动切换轮播图效果 - Python技术站