基于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);
    }