国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6! 如何制作一個高效輪播圖?

Simon / 1654人閱讀

摘要:你的網站真的需要一個輪播圖嗎輕輕問自己三聲,谷歌一下對輪播圖效果的相關調查和建議,再決定是否要著手制作你的輪播圖。在接近塊間距時關閉動畫移至另一塊相應位置。表示接近邊緣的圖片。可把一部分放到里或輪播圖前,阻塞渲染。

輪播圖千種萬種,怎樣才能做出符合要求的輪播圖?原理上天入地,如何優化才能達到極限絲滑?本文作者將解答這一切,通過現場制作一個輪播圖,帶你詳細了解、理解,制作 All kinds of 高性能輪播圖 !

仿自 Google Play

不過,在事實上,輪播圖的點擊率通常都很低,很少能引起用戶的注意,而卻往往占用了頁面某個極重要的位置。你的網站真的需要一個輪播圖嗎?輕輕問自己三聲,谷歌一下對輪播圖效果的相關調查和建議,再決定是否要著手制作你的輪播圖。

2017.8.20 更新——————————
1. 代碼簡潔化 & 語言精簡
2. 刪去不被推薦的有限部分
3. API 重寫

! ES6 API 重寫
ES6 啊,,牛逼啊!我TM要火啊!!
然而并沒有。

開始

1. 結構

div.father包裹圖片。div.viewport為視口部分。

A
B
C
D
E
.viewport {
  width: 900px;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.father {
  height: inherit;
  width: 3000%; /* 子元素 float 無法撐開 */
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease-in-out;
}
.father > div {
  width: 550px;
  height: inherit;
  float: left;
}
.mother {
  width: 30px;
  height: inherit;
  line-height: 300px;
  text-align: center;
  cursor: pointer;
  user-select:none;
  background: rgba(0,0,0,0.15);
  position: absolute;top: 0;
} .mother.left { left: 0 } .mother.right { right: 0 }

transform: translate3d()使用 GPU 加速。

2. 代碼實現

class Lunbo {
  constructor(element) {
    this.viewport = element;
    this.father = element.children[0];
    this.photos = this.father.children;
    // 自設的圖片寬, 包括 margin
    this.photoWidth = this.photos[0].offsetWidth + parseInt(getComputedStyle(this.photos[0]).marginLeft) + parseInt(getComputedStyle(this.photos[0]).marginRight);

    // 注冊移動事件
    element.children[1].addEventListener("click", this.left.bind(this));
    element.children[2].addEventListener("click", this.right.bind(this));
  }

  load() {

  }

  left() {
    this.load(this.showingId - 1);
  }

  right() {
    this.load(this.showingId + 1);
  }
}

頁面加載時:選取一張作為焦點
切換時fatherGo(to)負責跳轉到指定的焦點圖;

高效 & 無限輪播

(此處以下所有代碼僅顯示添加 / 修改部分)
思路也是難點。一題,這樣解決:

class Lunbo {
  constructor(element) {
    // (可視寬 -焦點圖片寬) / 2,焦點圖到視口左或右的距離
    this.partnerWidth = (this.viewport.clientWidth - this.photoWidth) / 2;
  }

  // 計算移動距離
  countX(id) {
    return -id * this.photoWidth + this.partnerWidth;
  }

  // 切換 / 載入 / 移動圖片。無參數則除法求整,僅用來切換到一個瞎選的初始焦點
  load(newId = parseInt(this.photos.length / 2) - 1) {
    this.father.style.transform = `translate3d(${this.countX(newId)}px, 0, 0)`;
    this.showingId = newId;
  }
}
// 切換至初始焦點
const Example = new Lunbo(document.getElementById("example"));
Example.load();

countX(id) 解釋:

若將 Id = 2 對應圖片(第 3 張)作焦點,向左挪過去兩張(此時該圖靠最左),后加回partnerWidth

二題:

A
B
C
D
E
A
B
C
D
E
A
B
C
D
E

三倍于展示圖,JS 動態生成亦可。稱之三個塊。

.moving { transition: none }

接近塊間距時關閉動畫移至另一塊相應位置。

class Lunbo {
  constructor(element) {
    // 表示接近邊緣的圖片 Id。接近左邊緣的即第2 張圖,右邊緣的則為倒數第二張
    this.closeLeftId = 1;
    this.closeRightId = this.photos.length - 2;

    this.photosQuantity = this.photos.length / 3;

    // 當運動到上面兩個 Id 時默默移動到的對應 Id
    // 接近左邊時跳轉到右邊塊的第二張
    // 接近右邊則跳轉到左邊塊的倒數第二張
    this.backLeftId = this.photosQuantity - 2;
    this.backRightId = this.photosQuantity * 2 + 1;
  }

  load(newId = parseInt(this.photos.length / 2) - 1) {
    this.father.style.transform = `translate3d(${this.countX(newId)}px, 0, 0)`;

    if (newId === this.closeLeftId){
      newId = this.backRightId;
    } else if (newId === this.closeRightId){
      newId = this.backLeftId;
    } else {
      this.showingId = newId;
      return;
    }
    this.father.addEventListener("transitionend", this.backMove.bind(this, newId), {once: true});
  }

  backMove(newId) {
    this.father.classList.add("moving");
    this.father.clientWidth();
    this.father.style.transform = `translate3d(${this.countX(newId)}px, 0, 0)`;
    this.father.clientWidth();
    this.father.classList.remove("moving");
    this.showingId = newId;
  }
}

4. 整理代碼


17.8.20

A
B
C
D
E
A
B
C
D
E
A
B
C
D
E

代碼已通過測試。你需要碼更多的代碼,兼容各個瀏覽器,以及讓它可以被更好地維護,然后做得更好(裝)看(B)一些。

高級選項

一味把

閱讀需要支付1元查看
<