基于vue的简易的水平方向图片无缝轮播方法

基于vue的简易的水平方向图片无缝轮播方法

图片列表的前端代码

标题轮播算法轮播算法

实现原理，通过改变图片数据数组位置–当一张图片滚动到可视区域外时（向左轮播时数组的第一个元素删除并添加到数组最后一个元素后，向右轮播时数组的最后一个元素删除并添加到数组第一个元素前）

	/**
     * 初始化图片轮播
     * @param {array} data 轮播的数据
     * @param {string} direction 方向 left, right
     * @param {number} speed 速度，越大越慢
     */
    ScrollPic (data, direction, speed) {
      if (direction === 'left') {
        this.scrollInterval = setInterval(() => {
          this.offsetData--;
          this.ScrollDataSet(direction, data);
        }, speed);
      } else {
        this.scrollInterval = setInterval(() => {
          this.offsetData++;
          this.ScrollDataSet(direction, data);
        }, speed);
      }
    },
	/**
     * 数据改变-- 无缝滚动算法
     * @param {string} direction 方向 left, right
     * @param {array} data 轮播的数据
     */
    ScrollDataSet (direction, data) {
      let $d = document.getElementsByClassName('scroll-image-list');
      let wd = $d[ 0 ].clientWidth;
      // 当一个元素跑出可视区域，删除这个元素，并添加在最后面
      if (direction === 'left') {
        if (Math.abs(this.offsetData) === 1)
          data.push(data[ 0 ]);

        if (Math.abs(this.offsetData) >= wd) {
          data.splice(0, 1);
          this.offsetData = 0;
        }
      } else {
        if (Math.abs(this.offsetData) === 1)
          data.unshift(data[ data.length - 1 ]);

        if (Math.abs(this.offsetData) >= wd) {
          data.splice(-1, 1);
          this.offsetData = 0;
        }
      }
    },
    /**
     * 清除滚动
     */
    clearScroll () {
      clearInterval(this.scrollInterval);
    },
    /**
     * 开启滚动
     * @param {array} data 轮播的数据
     * @param {string} direction 方向 left, right
     * @param {number} speed 速度，越大越慢
     */
    startScroll (data, direction, speed) {
      this.ScrollPic(data, direction, speed);
    }