1. 滚动插件的使用缘由

在项目开发中，图片滚动的应用场景特别多。有很多设计依靠滚动来实现。那么此时我们可以选择不同的滚动插件达到相同的效果。但是，外部插件却是是比较优秀，但是同时因为功能性代码太多，根据我们 组的开发情况，我们基本杜绝了外部插件，除非特殊情况必须使用。
而我编写的这个插件，可以实现目前设计中的各种滚动场景，支持自定义滚动距离，只要你是以下结构，你就可以直接将该滚动插件套用。当然，不是说一定要url>li 结构，而是只要是这种列表形式的dom结构都可以。

PC

Mobile

2. 需求驱动开发

我的页面并不是只有一个滚动，而是有很多个滚动效果。因此，并不能将代码写死在具体某一个dom（或者class名称）上。毕竟，在不同的结构中，class名称不可能一模一样。也不能因为滚动，就添加额外的class名称来控制。最简单的就是按照需要，提取公共的参数。

• parent: 滚动列表的父容器,
• children: 具体滚动列表集合,
• scrollStep：每次滑动的宽度,
• currentIndex：当前滚动显示的索引,
• childCls： child列表的class名称,
• isInfiniteScroll：是否需要支持无限滚动,
• paginationMethods：该插件根据需求支持3钟分页按钮，该方法可以自定义需要哪些，不局一个分页,
• paginationStep：每一页显示的个数（总共有4个card，默认4页，值设置为2，那么页数为2页）,
• customInitDom：当进行无限循环，每页有多个card, 当最后一个只有1个card,需要将剩下的card使用占位符占位，该值表示使用什么节点进行占位，默认为li

tip： 我们利用CSS transform 来实现移动。

3. 基本结构

下面呈现了该组件的基本结构，其实就是一个 slider 组件类，然后new 了一个组件出来。 我们还在组件内部，进行初始化了一系列的私有变量，每一个变量已近进行了详细注释。看到这里，可能对变量不是很清楚使用，这个没关系，我们后续每隔方法中会使用到。 但是注意 prototype上的 originListDoms 变量，它的作用是：当界面进行大小拖拽时，界面处于PC/Mobile的样式之间来回切换，如果mobile和pc一页显示的数量不一致，例如上面示例图中的情况，那么就需要存储原有的dom,这个参数就是用于存储改值的。

// 组件
function Slider(parent, children, scrollStep, currentIndex, childCls, isInfiniteScroll, paginationMethods, paginationStep, customInitDom) {
 // dom 相关参数初始化
  paginationStep = paginationStep || 1; // 默认每页1个card
  var parent = parent;
  var childCount = Math.ceil(children.length / paginationStep); // 多少个card
  var scrollStep = scrollStep; // 每次滑动的距离
  var currentIndex = currentIndex; // 当前选中的index(分页显示使用或者 正常滑动的索引)
  var infiniteCurrentIndex = currentIndex; // 无限滚动的索引（无限滚动时，分页的索引使用currentIndex）

 // 位置相关参数初始化
  var startPosition, // 滑动开始的位置
  endPosition, // 滑动结束位置
  deltaX, // 横向滑动距离
  deltaY, // 纵向滑动距离
  isTouchStartFirst = 1, // 是否第一次touch滚动
  isScroll; // isScroll 为0时，表示纵向滑动，1为横向滑动
  var isScrollProgress = false; // 是否在滑动中，用于计算滑动时不能点击card

 // 如果滑动元素有a标签，滑动中禁止点击
  var hrefAs = parent.find('a'); // 计算滑动中，将card link禁用
  var isPc = window.iSPc();
 
  this.initMobileOrPcSlider = function() {
 
  }
}
Slider.prototype.originListDoms = {};


//实例化Slider
var slider = new Slider(gallery, children, scrollStep, 0, childCls, isInfiniteScroll, paginationMethods, paginationStep, customInitDom);

slider.initMobileOrPcSlider();

4. 组件初始化

下面进行了伪代码的编写，我们首先进行了事件 dom等一系列的初始化，为什么呢？为了当自适应的时候，pc/mobile样式切换时进行，重置之前所有的参数，方便后续初始化。

为什么需要将 手机滚动事件、pc滚动事件也一起注册，同样是为了应付PC 调整尺寸大小时，为了平板尺寸大小时，能够进行滑动。

this.initMobileOrPcSlider = function() {

  // 清除所有的事件，dom初始化等
  gallery.siblings('.gallery-pagination').remove();
  gallery.siblings('.gallery-pagination-circle').remove();
  gallery.css('marginLeft', '0px');
  gallery.css('transform', ' translate3d(0px, 0px, 0px)');
  // 2. 先卸载移动事件，避免resize时，重复注册
  gallery.off('touchstart');
  gallery.off('mousedown');



  // 是如果无限滚动处，进行dom处理
  isInfiniteScroll && infiniteScrollDomInit();

  // 注册动画滚动结束事件 
  initTransitionend();
  
  // 注册手机滑动效果
  registerMobileScroll();
 

 // 注册PC 滑动效果
 registerPCScroll();

// 动态添加小圆点
if (paginationMethods） {
 //初始化自定义的小圆点
getCustomPagination(paginationMethods);
} else {
 // 根据pc mobile 初始化小圆点或者分页按钮

isPc ? initPCGalleryPagination() : initMobileGalleryPagination();}

}
preventHrefLink();

处理card上的a标签，滑动不能点击

  var preventHrefLink = function() {
    hrefAs.on('click', function(e) {
      if (isScrollProgress) {
        e.preventDefault();
        return false;
      }
    });
  };

好的，那么接下来，我们就开始按照上面的伪代码，丰满每一个小的步骤。

4.1 无限循环处理

无限滚动，实际利用了一个视觉的障眼法。按照以下步骤实现：

• 将第一张，拷贝到最后一个位置，最后一个张内容，拷贝到第一个位置。例如下面的卡片。
• dom准备好后，将滚动区域向前移动一个card距离（每次滚动的的间距）
• 注册滚动结束时的事件。滚动可以向前滚动，可以向后滚动。如果向前滚动到最前面的一张（card3备份，索引为0）,那么将其索引设置为3（card3原图）。并在滚动结束时滚动到card3原图。因为滚动的时候使用了动画，那么在滚动到card3原图时，不使用动画，直接跳转，视觉上和card3备份图内容一致，感觉不到任何差异，就完成了无缝切换的效果。当然，滚动到最后一张图也是类似操作，当最后一张card1复制 滚动结束时，将索引设置为Card1,并消除动画，移动到card1原图，实现无缝切换。
  

到此，无限滚动处理完成，相关代码如下：

 /**
   * 无限循环gallery, 初始化时，将第一个添加到最后，将最后一个添加到第一个
   */
  var infiniteScrollDomInit = function() {
    
    var children = parent.find(childCls);

    // 获取第一页元素和最后一页元素
    var preToEndDom = children.slice(0, paginationStep);
    var endToPreDom = children.slice(paginationStep * (childCount - 1), paginationStep * (childCount - 1) + 2);

    // endToPreDom 如果不够一页内容，则使用li填充
    var endPageCount = endToPreDom.length;
    if (endPageCount < paginationStep) {

      // 最后一页数量只有一条，但是每一页需要显示paginationStep，则现在父组件末尾添加一些空的占位符
      for (var i = endPageCount; i < paginationStep; i++ ) {
        customInitDom = customInitDom || '<li></li>';
        parent.append($(customInitDom));
      }
      endToPreDom = parent.find(childCls).slice(paginationStep * (childCount - 1), paginationStep * (childCount - 1) + 2);
    }
    
    // 添加到最前面和最后面
    parent.prepend($(endToPreDom.clone()));
    parent.append($(preToEndDom.clone()));
    parent.css('marginLeft', -(scrollStep) + getUnit());

    // 更新a标签（添加的dom也需要追加）
    hrefAs = parent.find('a');
  }



  /**
   * 当动画滚动结束后，将isScrollProgress设置为false，表示滚动结束
   * - 当滚动到最前面或者最后面，初始化index索引，并将其滚动到与其内容相同的card上
   */
  var initTransitionend = function() {
    parent.on('transitionend', function() {


      // 移动完成，将表示设置为false
      isScrollProgress = false;

      // 如果滑动到最最后面，索引修改为 第一个
      if (infiniteCurrentIndex == childCount) {
        infiniteCurrentIndex = 0;
        move(infiniteCurrentIndex, 0);
      }
  
      // 如果滑动到最前面，索引修改为 最后一个
      if (infiniteCurrentIndex < 0) {
        infiniteCurrentIndex = childCount - 1;
        move(infiniteCurrentIndex, 0);
      }
    })
  }

4.2 给slider注册滑动事件

现在，我们需要给Slider注册上滚动事件，让我们手动滑动时，能够进行滚动。当然，如果你是希望自动播放，那么你可以通过setInterval等相关的操作实现。
我们上面在定义参数时，isScrollPrgress就是表示，是否在滚动中。滚动中就不进行第二次滚动触发。不管是PC/Mobile都是一样的。
我们还需要注意一点：滚动时，如果滚动的角度小（例如是纵向滑动，就不应该滚动），那么避免滚动。

• Mobile 滑动效果，通过 touchstart, touchmove, touched来实现。

     // -------手机滑动效果 start
    parent.on('touchstart', function(e) {
      // 如果在移动中，不再进行下一次移动
      if (isScrollProgress) {
        return;
      }
      var touch = e.originalEvent.targetTouches[0];
      startPosition = {
          x: touch.clientX,
          y: touch.clientY
      }
      isTouchStartFirst = 1;

      parent.on('touchmove', function(e) {
        isScrollProgress = true;
        var touch = e.targetTouches[0];
        endPosition = {
            x: touch.clientX,
            y: touch.clientY
        };
        deltaX = endPosition.x - startPosition.x;
        deltaY = endPosition.y - startPosition.y;
        //  只有刚开始的touchstart，才去判断滑动的方向
        if(isTouchStartFirst === 1){
            isScroll = (Math.abs(deltaX)  * 1.3- Math.abs(deltaY)) > 0 ? 1 : 0;
        }
        isTouchStartFirst++;
        //  isScrolling为0时，表示纵向滑动，1为横向滑动
        if (isScroll === 1) {
          e.preventDefault();
          if (deltaX !== 0 && isInfiniteScroll) {
            mouseMoveTransation(deltaX);
          }
        }
      });
      parent.on('touchend', function(){
        if ((Math.abs(deltaY) > 10 && Math.abs(deltaX) < 10) || isScroll === 0) {
            return;
        }
        if(deltaX < 0) {
          movePre();
        } else if(deltaX > 0) {
          moveNext();
        }

        parent.off('touchmove');
        parent.off('touchend');
      });
    });
    // --------Mobile滑动效果 end

• PC 滑动效果，通过 mousedown, mousemove, mouseup来实现。

    parent.on('mousedown', function (ev) {
      // 如果在移动中，不再进行下一次移动
      if (isScrollProgress) {
        return;
      }
      ev.preventDefault();
      ev.stopPropagation();
      ev.cancelable = false;
      startPosition = {
          x: ev.pageX
      }
      $("body").on('mousemove', function(e) {
        isScrollProgress = true;
          endPosition = {
              x: e.pageX,
          };
          deltaX = endPosition.x - startPosition.x;
          if (deltaX !== 0 && isInfiniteScroll) {
            mouseMoveTransation(deltaX);
          }
      });

      $("body").on('mouseup', function() {
        if(deltaX < 0) {
          movePre();
        } else if(deltaX > 0) {
          moveNext();
        }

        $("body").off('mousemove');
        $("body").off('mouseup');
      });
    });

4.3 根据拖拽移动

加入我们开始滑动，但是鼠标左右拖拽，那么此时将card随着鼠标的位置进行移动，这样会显得我们的slider比较活跃。当然，该操作是在 mousemove/touchmove时触发的。

 var mouseMoveTransation =  function(mouseMoveWidth) {
    mouseMoveWidth = isPc ? ( mouseMoveWidth / parent.width() * 100) : mouseMoveWidth / 100;
    var transtationWidth = tranlateX + mouseMoveWidth;
    parent.css('transform', 'translate3d(' + transtationWidth + getUnit()  + ', 0px, 0px)');
    parent.css('transitionDuration', '0s');
  }

4.4 移动处理

上面的准备操作依据完成了，movePre和moveNext还是一个空壳。 那么下面开始直接实现移动效果。

每次移动后，进行了分页刷新 reloadPagination，这里先知道就可以了，分页的方法放在最后。

/**
   * 计算滚动距离
   * @param{*}current 当前索引
   */
vargetScrollWidth = function(current) {
returnscrollStep * current;
  }

vargetUnit = function() {
// var unit = isPc ? '%' : '%';
return'%';
  }

/**
   * 移动一个图片
   * @param{*}current 当前选中页面
   * @param{*}transitionDuration 滑动消费时间
   */
varmove = function(current, transitionDuration) {
tranlateX = -getScrollWidth(current);
parent.css('transform', 'translate3d(' + tranlateX + getUnit()  + ', 0px, 0px)');
varnewTransitionDuration = (transitionDuration === undefined || transitionDuration === null) ? 0.6 : transitionDuration;
parent.css('transitionDuration', (parseFloat(newTransitionDuration) * paginationStep) + 's');
reloadPagination();
  };

上面的方法，是移动一个图片，通过css的属性实现的。对应无限滚动和普通滚动都是一致的。那么接下来我们就处理movePre和moveNext方法。

/**
   * 滑动方式左移动
   */
  var movePre = function() {
    isInfiniteScroll ? infiniteMovePre() : finiteMovePre();
  };

  /**
   * 滑动方式右移动
   */
  var moveNext = function() {
    isInfiniteScroll ? infiniteMoveNext() : finiteMoveNext();
  } 

普通滑动事件处理

  /**
   * 向左边移动
   */
  var finiteMovePre = function() {
    if (currentIndex >= childCount - 1) {
      isScrollProgress = false;
      return;
    }
    currentIndex++;
    move(currentIndex);
  }
  
  /**
   * 向右边移动
   */
  var finiteMoveNext = function() {
    if (currentIndex <= 0) {
      isScrollProgress = false;
        return;
    }
    currentIndex--;
    move(currentIndex);
  }

无限滚动滑动事件处理

/** 
   * 无限循环向左移动
   * curentIndex 用于显示pagination，因此保持更新
  */
  var infiniteMovePre = function() {

    // 处理pagination 的index,逻辑保持不变
    if (currentIndex >= childCount - 1) {
      currentIndex = 0;
    } else {
      currentIndex++;
    }

    infiniteCurrentIndex++;
    move(infiniteCurrentIndex);
  }
  
  /**
   * 无限循环向右边移动
   * curentIndex 用于显示pagination，因此保持更新
   */
  var infiniteMoveNext = function() {
    if (currentIndex <= 0) {
      currentIndex = childCount - 1;
    } else {
      currentIndex--;
    }

    infiniteCurrentIndex--;
    move(infiniteCurrentIndex);
  }

按钮方式点击分页

  /**
   * 通过按钮左移动
   */
  var clickPreMove = function() {
    if (!isScrollProgress) {
      isScrollProgress = true;
      movePre();
    }
  };
  /**
   * 通过按钮右移动
   */
  var clickNextMove = function() {
    if (!isScrollProgress) {
      isScrollProgress = true;
      moveNext();
    }
  }  

4.5 分页处理

这里，我选择了2中分页方式，一种小圆点方式，一种是按钮方式。小圆点方式可以用于PC,也可以用于Mobile。而按钮建议用于PC.

小圆点分页

   var initMobileGalleryPagination = function() {
    var pagination = '<div class="gallery-pagination-circle">${items}</div>', items = '';
    for(var i = 0; i < childCount; i++) {
      let spanDom = i === 0 
        ? '<span class="select-span" indexValue="' + i + '" ></span>' 
        : '<span indexValue="' + i + '"></span>';
      items += spanDom;
    }
    pagination = pagination.replace('${items}', items);
    parent.after(pagination);
    
    // pagination 注册点击事件
    var paginationDom = parent.next()[0];
    if (paginationDom) {
      $(paginationDom).on('click', 'span', function(e) {
        var index = $(e.target).attr('indexValue');
        currentIndex = index;
        infiniteCurrentIndex = index;
        move(index);
      })
    }
  }

按钮分页

  var initPreAndNextPagination = function() {
    
    var prePagination = $('<span class="pre-pagination-btn"></span>');
    var nextPagination = $('<span class="next-pagination-btn"></span>');

    prePagination.on('click', clickNextMove);
    nextPagination.on('click', clickPreMove);

    // 在父级的父级身上添加按钮
    var wrapper = parent.parent();
    wrapper.parent().css('position', 'relative');

    wrapper.siblings('.pre-pagination-btn').remove()
    wrapper.siblings('.next-pagination-btn').remove();

    wrapper.after(nextPagination);
    wrapper.after(prePagination);
  }

**通过名字，自定义分页 **

 /**
   * 自定义分页：分页有很多种，当想自定义不同类型的分页，可以传递方法名称
   * 
   * @param {*} paginationArr 自定义方法名称字符串 [initMobileGalleryPagination, initPCGalleryPagination, initPreAndNextPagination]
   */
  var getCustomPagination = function(paginationArr) {
    var originPagiantions = {
      initMobileGalleryPagination: initMobileGalleryPagination,
      initPCGalleryPagination: initPCGalleryPagination,
      initPreAndNextPagination: initPreAndNextPagination,
    };
    paginationArr.map(function(method) {
      originPagiantions[method] && originPagiantions[method]();
    });
  }

不同分页方式分页reload 该方法在move函数中使用到的，每次通过说移动结束，需要手动更新分页显示。

var reloadPagination = function() {
    var paginationDom = parent.next();

    // PC 页码方式分页
    var currentPage = paginationDom.find('.current-page');
    if (currentPage.length > 0) {
      currentPage.text(currentIndex + 1);
    }

    // 底部Circle分页 点击分页后，更新页码

    if (paginationDom.hasClass('gallery-pagination-circle')) {
      var circleSpans = paginationDom.children('span');
      circleSpans.removeClass('select-span');
      circleSpans.eq(currentIndex).addClass('select-span');
    }
  }

5. 窗口调整Resize初始化

用户在使用的过程中，肯定会遇到拖拽，那么在拖拽的时候，我们不仅仅是css进行适应，还应该有JS注册事件。在上面我们已经在初始化中清除了所有的事件，方便resize时，重新初始化。但是我们可能做得更好，在进行resize时，如果是PC样式，那么就不在重复渲染。

我们公共resize和节流函数进行配合达到这个目的。

定义全局变量，通过 windowIsResize ，我们可以直到窗口是否移动。

window.windowIsResize = false;
; (function ($) {
  // 上一次记录
  var preWindowWidth = $(window).width();
  var preDevice = iSPc();



  $(window).resize(throttle(function () {

    // resize 获取
    var currentWindowWidth = $(window).width();
    var currentDdevice = iSPc();

    // 宽度相等或者设备相等，直接设置为false
    if (currentWindowWidth === preWindowWidth || currentDdevice === preDevice) {
      window.windowIsResize = false;
    } else {
      window.windowIsResize = true;
    }

    // 更新
    preWindowWidth = currentWindowWidth;
    preDevice = currentDdevice;
  }, 200));
})($);

通过设备宽度判断，是否重新渲染slider

;(function($, document) {
  resizeGallery();
  $(window).resize(throttle(function() {
    // 宽度变化且设备变化，重新初始化gallery
    if (window.windowIsResize) {
      

    var slider= new Slider(gallery, children, scrollStep, 0, childCls, isInfiniteScroll, paginationMethods, paginationStep, customInitDom);
    slider.initMobileOrPcGallery();

    }
  }, 200));
})($);

至此，Slider组件已经完成，肯定会存在一些小的问题，大家事件了可以告知我~~