老师，针对之前的遗留问题（js和发送消息），客服老师已经发给我了，但是看不太懂

还想请老师帮我解释一下修改的思路

我的问题的链接：（js动画失效问题和发送消息问题）（第二种滑入滑出方试）

https://class.imooc.com/course/qadetail/193450

(function($) {
  'use strict';

  function Slider($elem, options) {
    this.$elem = $elem;
    this.options = options;
    this.$items = this.$elem.find('.slider-item');
    this.$indicators = this.$elem.find('.slider-indicator');
    // this.$controlLeft=this.$elem.find('.slider-control-left');
    // this.$controlRight=this.$elem.find('.slider-control-right');
    this.$controls = this.$elem.find('.slider-control');
    this.itemNum = this.$items.length;
    this.curIndex = this._getCorrectIndex(this.options.activeIndex);

    this._init();
  }

  Slider.DEFAULTS = {
    css3: false,
    js: false,
    animation: 'fade', // slide
    activeIndex: 0,
    interval: 0,
    loop: false
  };

  Slider.prototype._init = function() {
    var self = this;
    // init show

    this.$indicators.removeClass('slider-indicator-active');
    this.$indicators.eq(this.curIndex).addClass('slider-indicator-active');
    //to
    if (this.options.animation === 'slide') {
      this.$elem.addClass('slider-slide');
      // // this.$items.eq(this.curIndex).css('left', 0);

      // 应该用 this.$container 监听事件，而不是 this.$items
      // 因为此时移动的是 this.$container
      // 所以这里的代码需要往后移，因为此时 this.$container 还没定义
      //send message
      // this.$items.on('move moved', function(e) {
      //   var index = self.$items.index(this);

      //   if (e.type === 'move') {
      //     if (index === self.curIndex) {
      //       self.$elem.trigger('slider-hide', [index, this]);
      //     } else {
      //       self.$elem.trigger('slider-show', [index, this]);
      //     }
      //   } else {
      //     // moved
      //     if (index === self.curIndex) {
      //       // 指定的
      //       self.$elem.trigger('slider-shown', [index, this]);
      //     } else {
      //       self.$elem.trigger('slider-hidden', [index, this]);
      //     }
      //   }
      // });

      // // move init
      // this.$items.move(this.options);

      this.to = this._slide;
      this.$container = this.$elem.find('.slider-container');
      this.itemWidth = this.$items.eq(0).width();
      this.$container.css('left', -1 * this.curIndex * this.itemWidth);
      // this.itemWidth = this.$items.eq(0).width();
      // this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : '';

      // 移到这里来
      // 多接收了两个参数：$container 表示正在移动的元素；distLeft 表示移动完成后，移动元素 的 left值
      // 这里需要修改 move.js 的 to 方法，在触发move事件时，多传递2个参数
      // 也需要修改 move.js 的 Js.prototype.to 方法，在触发 moved 事件时，多传递4个参数
      this.$container.on('move moved', function(
        e,
        $container,
        distLeft,
        distTop,
        originalLeft,
        originalTop
      ) {
        // 计算 index 的方法错了，此时移动的是 this.$container
        // 这样是无法计算它的索引的，总是 -1
        // var index = self.$items.index(this);

        if (e.type === 'move') {
          // 想要计算移动前的索引是多少
          var left = parseInt($container.css('left'));
          // 计算出移动刚开始时的索引值
          var index = Math.abs(parseInt(left / self.itemWidth));
          // 计算出移动完成后的索引值
          var distIndex = Math.abs(parseInt(distLeft / self.itemWidth));
          // console.log(index, self.curIndex);
          // console.log(index, distIndex);

          // 当前的开始隐藏
          self.$elem.trigger('slider-hide', [index, this]);
          // 移动完成后的开始显示
          self.$elem.trigger('slider-show', [distIndex, this]);

          // if (index === self.curIndex) {
          //   self.$elem.trigger('slider-hide', [index, this]);
          // } else {
          //   self.$elem.trigger('slider-show', [index, this]);
          // }
        } else {
          // moved
          // 计算出移动刚开始时的索引值
          var index = Math.abs(parseInt(originalLeft / self.itemWidth));
          // 计算出移动完成后的索引值
          var distIndex = Math.abs(parseInt(distLeft / self.itemWidth));

          // 移动刚开始时的那个幻灯片完全隐藏
          self.$elem.trigger('slider-hidden', [index, this]);
          // 移动完成后的那个幻灯片完全显示
          self.$elem.trigger('slider-shown', [distIndex, this]);

          // if (index === self.curIndex) {
          //   // 指定的
          //   self.$elem.trigger('slider-shown', [index, this]);
          // } else {
          //   self.$elem.trigger('slider-hidden', [index, this]);
          // }
        }
      });

      //move init
      this.$container.move(this.options);

      if (this.options.loop) {
        this.$container.append(this.$items.eq(0).clone());
        this.transitionClass = this.$container.hasClass('transition')
          ? 'transition'
          : '';
        this.itemNum++;
      }
    } else {
      this.$elem.addClass('slider-fade');
      this.$items.eq(this.curIndex).show();

      // send message
      this.$items.on('show shown hide hidden', function(e) {
        self.$elem.trigger('slider-' + e.type, [self.$items.index(this), this]);
        // 发送消息，同时传参当前显示的第几个及该DOM
      });

      // showHide init
      this.$items.showHide(this.options);
      this.to = this._fade;
    }

    //bind event
    this.$elem
      .hover(
        function() {
          self.$controls.show();
        },
        function() {
          self.$controls.hide();
        }
      )
      .on('click', '.slider-control-left', function() {
        self.to(self._getCorrectIndex(self.curIndex - 1), 1); //通过第二个参数有无来确定是点击的箭头还是下面的圆点
      })
      .on('click', '.slider-control-right', function() {
        self.to(self._getCorrectIndex(self.curIndex + 1), -1);
      })
      .on('click', '.slider-indicator', function() {
        self.to(self._getCorrectIndex(self.$indicators.index(this)));
      });

    // auto
    if (this.options.interval && !isNaN(Number(this.options.interval))) {
      this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this));
      this.auto();
    }
  };

  Slider.prototype._getCorrectIndex = function(index, maxNum) {
    maxNum = maxNum || this.itemNum;
    if (isNaN(Number(index))) return 0;
    if (index < 0) return maxNum - 1;
    if (index > maxNum - 1) return 0;
    return index;
  };

  Slider.prototype._activateIndicators = function(index) {
    // this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active');
    this.$indicators.removeClass('slider-indicator-active');
    this.$indicators.eq(index).addClass('slider-indicator-active');
  };

  Slider.prototype._fade = function(index) {
    if (this.curIndex === index) return;
    this.$items.eq(this.curIndex).showHide('hide');
    this.$items.eq(index).showHide('show');
    this._activateIndicators(index);
    this.curIndex = index;
  };
  Slider.prototype._slide = function(index, direction) {
    if (this.curIndex === index) return;
    var self = this;

    // 之前有停顿问题的原因就在于这里
    // 因为这里一上来就开始运动了，后面判断完该往哪里运动后，又开启了一次运动，相当于有2次运动，造成了冲突
    // 所以把这里的运动注释掉，放在后面的 if 分支中，保证同一时间只有一次运动
    // this.$container.move('x', -1 * index * this.itemWidth);
    // this.curIndex = index;
    if (this.options.loop && direction) {
      if (direction < 0) {
        if (index === 0) {
          console.log(index);
          this.$container.removeClass(this.transitionClass).css('left', 0);
          this.curIndex = index = 1;
          setTimeout(function() {
            self.$container
              .css('left', 0)
              .addClass(self.transitionClass)
              .move('x', -1 * index * self.itemWidth);
          }, 20);
        } else {
          // 这里是新增的分支，表示当 direction < 0 时，index !=0 的情况下该怎么运动
          // 其实就是把上面注释掉的代码，拿过来了
          this.$container.move('x', -1 * index * this.itemWidth);
          this.curIndex = index;
        }
      } else {
        if (index === this.itemNum - 1) {
          console.log(index);
          this.$container
            .removeClass(this.transitionClass)
            .css('left', -1 * index * this.itemWidth);
          this.curIndex = index = this.itemNum - 2;
          setTimeout(function() {
            self.$container
              .addClass(self.transitionClass)
              .css('left', -1 * (self.itemNum - 1) * self.itemWidth)
              .move('x', -1 * index * self.itemWidth);
          }, 20);
        } else {
          // 这里是新增的分支，表示当 direction >= 0 时，index != this.itemNum - 1 的情况下该怎么运动
          // 其实就是把上面注释掉的代码，拿过来了
          this.$container.move('x', -1 * index * this.itemWidth);
          this.curIndex = index;
        }
      }

      index = this._getCorrectIndex(index, this.itemNum - 1);
    } else {
      // 这里是新增的分支，表示当 this.options.loop!=true或direction没有值的情况下该怎么运动
      // 其实就是把上面注释掉的代码，拿过来了
      this.$container.move('x', -1 * index * this.itemWidth);
      this.curIndex = index;
    }
    this._activateIndicators(index);

    // if (this.curIndex === index) return;

    // var self = this;

    // // 确定滑入滑出的方向
    // if (!direction) { // click indicators
    //     if (this.curIndex < index) {
    //         direction = -1;
    //     } else if (this.curIndex > index) {
    //         direction = 1;
    //     }
    // }

    // // 设置指定滑入幻灯片的初始位置
    // this.$items.eq(index).removeClass(this.transitionClass).css('left', -1 * direction * this.itemWidth);

    // // 当前幻灯片滑出可视区域，指定幻灯片滑入可视区域
    // setTimeout(function() {
    //     self.$items.eq(self.curIndex).move('x', direction * self.itemWidth);
    //     self.$items.eq(index).addClass(self.transitionClass).move('x', 0);
    //     self.curIndex = index;
    // }, 20);

    // // 激活indicator
    //  this._activateIndicators(index);
  };

  Slider.prototype.auto = function() {
    var self = this;
    this.intervalId = setInterval(function() {
      self.to(self._getCorrectIndex(self.curIndex + 1), -1);
    }, this.options.interval);
  };
  Slider.prototype.pause = function() {
    clearInterval(this.intervalId);
  };

  $.fn.extend({
    slider: function(option) {
      return this.each(function() {
        var $this = $(this),
          slider = $this.data('slider'),
          options = $.extend(
            {},
            Slider.DEFAULTS,
            $(this).data(),
            typeof option === 'object' && option
          );
        // dropdown(this, options);
        if (!slider) {
          //解决多次调用dropdown问题
          $this.data('slider', (slider = new Slider($this, options)));
        }

        if (typeof slider[option] === 'function') {
          slider[option]();
        }
      });
    }
  });
})(jQuery);