從零開始寫一個輪播

2019年8月24日 141次阅读 来源: 窗里窗外

什麼是輪播

輪播，英文slider，也就是幻燈片的意義，我們能夠手動或許自動切換一張張的照片到達顯現的目標。各大電商網站都邑運用輪播來展現商品，能夠在相對較小的空間里，完成多種展現。

怎樣完成一個輪播

平常，我們能夠兩種要領來完成輪播，比方，中心思緒運用透明度來切換照片，運用間隔來平移照片。在這裏我們運用平移的體式格局來完成輪播，並經由過程幾組中心數據來完成slide的切換，另外，平常還具有多種要領能夠完成無縫切換。

需求剖析

我們完成的輪播，所須要具有的功用能夠分為以下幾部份：

  1. 點擊擺布箭頭，前後切換slide
  2. 無縫切換輪播
  3. 點擊輪播中的導航按鈕，切換差別的slide
  4. 初始狀況會每隔3s自動切換slide
  5. 鼠標懸浮在slide上時，自動輪播住手，移出後會恢復自動輪播狀況
  6. 斟酌復用性，籠統為一個組件，其他如點擊切換等功用斟酌為插件注入

1. 向前和向後切換和無縫切換

1. 構造和款式

我們設置兩個容器，經由過程在父容器運用transform舉行擺布平移，translateX()是相對於本身的寬度，而在子容器里經由過程相對定位來舉行平移，个中left屬性相對的是父容器的寬度，如許父容器平移100%，子容器間隔左側-100%，就能夠互相抵消。

HTML構造以下

<div id="m-slider">
  <div class="slide">
    <img >
  </div>
  <div class="slide">
    <img >
  </div>
  <div class="slide">
    <img >
  </div>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

CSS以下,略有刪減，能夠參考源碼

#m-slider {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
}
.slide {
  position: absolute;
}
 .slide:nth-child(1) {
  left: 0%;
}
.slide:nth-child(2) {
  left: 100%;
}
.slide:nth-child(3) {
  left: 200%;
}

此時我們曉得能夠顯現第二張圖片。

2. 前後邏輯掌握

數據模型：

  1. slideIndex為slide的索引，取值為0,1,2，示意一直只要三張圖片在HTML構造當中。
  2. offset示意當前間隔最左側切換圖片的數目，每次向後切換時，都邑加1，取值局限為1~圖片的總數目

相干申明：

  1. normalIdx()要領是一個將数字轉換為len局限的要領，吸收索引和長度，返回一個在len以內的數值，這裏的len固定為3
  2. go()要領，吸收1或許-1，離別示意向前和向後挪動，以向前挪動為例，此時做了兩件事，相干所以會更新，轉變容器的偏移，主如果offset和slideIndex會發作變化，都須要挪用規範化要領，使其數值一直處於3以內。
  3. calcDistance()要領為盤算挪動間隔的要領，主要有父容器和slide的間隔盤算。
var slider = document.getElementById('m-slider')
var slides = document.querySelectorAll('.slide')
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var slideIndex = 1; // one of 0,1,2
var offset = 1; // 顯現的slide距容器最左側的偏移量

prev.onclick = function() {
    go(-1);
}
next.onclick = function() {
    go(1);
}
function normalIdx(index,len) {
  return (index + len) % len;
}
function go(foreward) {
  
  offset += foreward; // 向右挪動了一個，一切偏移量也須要加一
  slideIndex += foreward; // 向右挪動了一個，所以加一，須要歸三化
  slideIndex = normalIdx(slideIndex,3);
  var prevIndex =  normalIdx(slideIndex - 1,3);
  var nextIndex =  normalIdx(slideIndex + 1,3);
  calcDistance(prevIndex,slideIndex,nextIndex,offset);
}
function calcDistance(prevIndex,slideIndex,nextIndex,offset) {
  slider.style.transform = `translateX(${-100*offset}%)`
  //console.log(slider.style.transform)
  console.log(offset)
  // slide offseet
  slides[prevIndex].style.left = `${100*(offset-1)}%`;
  slides[slideIndex].style.left = `${100*offset}%`;
  slides[nextIndex].style.left = `${100*(offset+1)}%`;
}

2. 無縫輪播

每次切換時，slide的left屬性都邑轉變，父容器的transform也發作轉變，互相抵消，輕鬆完成無縫切換，注重: 我們這裏只設置了三張照片，恰好與請求一致，並沒有對相干數據舉行盤算處置懲罰。

/** 不論輪播的照片有若干，只要三欄是常駐的
 *      -------------------
 *      |     |     |     |  
 * -------------------------------
 * |    |     |     |     |      |
 * |    |     |     |     |      |
 * |    |  1  |  2  |  3  |      |
 * |    |     |     |     |      |
 * |    |     |     |     |      |
 * -------------------------------
 *      |     |     |     |
 *      -------------------
 */

3. 面向對象化

我們將前面寫的營業代碼，用面向對象的思想來重構一下。

HTML發作一些轉變，我們將Img經由過程JS動態注入

<div id="m-slider">
  <div class="slide"> </div>
  <div class="slide"> </div>
  <div class="slide"> </div>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

JS部份,這裏`pageNum示意圖片的總數目，能夠為恣意数字，renderImg()為襯着圖片的要領，主要在切換的時刻轉變圖片的url，第一次須要舉行初始化。


// Component
class Slider {
    constructor(el) {
      // omit some code
      this.offset = 1;// 偏移量，即個數
      this.slideIndex = 1;// slide index one of 0, 1, 2
      this.pageIndex = 1;// page index of total pictures
      this.pageNum = 6;// total pictures
  }
  // 標準化index，使index一直為0,1,2中的一個
  normalIdx(index,len) {
    return (index + len) % len;
  }
  
  // slide move according to the flag
  go(flag) {
    // 1. offset and slideIndex change
    this.offset += flag;
    this.pageIndex += flag;
    const slideIndex = this.slideIndex = this.normalIdx( this.slideIndex += flag,3);
     
     // 盤算挪動間隔
     this.calcDistance();
  }
  
  // style change
  calcDistance() {
      const offset = this.offset;
    const slideIndex = this.slideIndex;
    // index
    const prevIndex = this.normalIdx( slideIndex - 1, 3)
    const nextIndex = this.normalIdx( slideIndex + 1, 3)
    this.pageIndex = this.normalIdx(this.pageIndex,this.pageNum) 

    // 2. container and slide move
    this.container.style.transform = `translateX(${-100 * (offset)}%) `;
    this.slides[prevIndex].style.left = `${100 * (offset - 1)}%`;
    this.slides[slideIndex].style.left = `${100 * offset}%`;
    this.slides[nextIndex].style.left = `${100 * (offset + 1)}%`;
    //console.log(this.pageIndex,this.slideIndex)
    this.renderImg(this.pageIndex,this.slideIndex);
  }
  renderImg(pageIndex,slideIndex) {
      for(let i = -1; i <= 1; i++) {
      const index = (slideIndex+i+3) % 3; // 決議圖片的url和left漂移
      let img = this.slides[index].querySelector('img');
      let picId = this.normalIdx( pageIndex + i, this.pageNum) + 1;
      
      // 頁面初始化運用，運轉一次
      if(!img) {
        img = document.createElement('img');
        this.slides[index].appendChild(img);
      }
      img.src = 'http://placehold.it/300x200&text=' + picId + '-Mint';
    }
  }
  start() {
      this.bindEvents()
    this.renderImg(1,1);
  }
}

const mySlider = new Slider('m-slider');
mySlider.start()

4. 完整版

Source

增加了nav功用，點擊對應的小按鈕，即可跳轉到指定的slide上

5. 跋文

後期將斟酌將輪播舉行組件化，封裝成自力的組件，增加更多可定製的功用。

    原文作者：窗里窗外
    原文地址: https://segmentfault.com/a/1190000015185696
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞