資訊專欄INFORMATION COLUMN
摘要：你的網(wǎng)站真的需要一個(gè)輪播圖嗎輕輕問自己三聲，谷歌一下對(duì)輪播圖效果的相關(guān)調(diào)查和建議，再?zèng)Q定是否要著手制作你的輪播圖。在接近塊間距時(shí)關(guān)閉動(dòng)畫移至另一塊相應(yīng)位置。表示接近邊緣的圖片。可把一部分放到里或輪播圖前，阻塞渲染。
輪播圖千種萬種，怎樣才能做出符合要求的輪播圖？原理上天入地，如何優(yōu)化才能達(dá)到極限絲滑？本文作者將解答這一切，通過現(xiàn)場(chǎng)制作一個(gè)輪播圖，帶你詳細(xì)了解、理解，制作 All kinds of 高性能輪播圖 ！
仿自 Google Play
不過，在事實(shí)上，輪播圖的點(diǎn)擊率通常都很低，很少能引起用戶的注意，而卻往往占用了頁面某個(gè)極重要的位置。你的網(wǎng)站真的需要一個(gè)輪播圖嗎？輕輕問自己三聲，谷歌一下對(duì)輪播圖效果的相關(guān)調(diào)查和建議，再?zèng)Q定是否要著手制作你的輪播圖。
2017.8.20 更新——————————
1. 代碼簡(jiǎn)潔化 & 語言精簡(jiǎn)
2. 刪去不被推薦的有限部分
3. API 重寫
! ES6 API 重寫
ES6 啊，，牛逼啊！我TM要火啊！！
然而并沒有。
1. 結(jié)構(gòu)
div.father包裹圖片。div.viewport為視口部分。
.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. 代碼實(shí)現(xiàn)
class Lunbo {
constructor(element) {
this.viewport = element;
this.father = element.children[0];
this.photos = this.father.children;
// 自設(shè)的圖片寬, 包括 margin
this.photoWidth = this.photos[0].offsetWidth + parseInt(getComputedStyle(this.photos[0]).marginLeft) + parseInt(getComputedStyle(this.photos[0]).marginRight);
// 注冊(cè)移動(dòng)事件
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);
}
}
頁面加載時(shí)：選取一張作為焦點(diǎn)
切換時(shí)：fatherGo(to)負(fù)責(zé)跳轉(zhuǎn)到指定的焦點(diǎn)圖；
高效 & 無限輪播
（此處以下所有代碼僅顯示添加 / 修改部分）
思路也是難點(diǎn)。一題，這樣解決：
class Lunbo {
constructor(element) {
// (可視寬 -焦點(diǎn)圖片寬) / 2，焦點(diǎn)圖到視口左或右的距離
this.partnerWidth = (this.viewport.clientWidth - this.photoWidth) / 2;
}
// 計(jì)算移動(dòng)距離
countX(id) {
return -id * this.photoWidth + this.partnerWidth;
}
// 切換 / 載入 / 移動(dòng)圖片。無參數(shù)則除法求整，僅用來切換到一個(gè)瞎選的初始焦點(diǎn)
load(newId = parseInt(this.photos.length / 2) - 1) {
this.father.style.transform = `translate3d(${this.countX(newId)}px, 0, 0)`;
this.showingId = newId;
}
}
// 切換至初始焦點(diǎn)
const Example = new Lunbo(document.getElementById("example"));
Example.load();
countX(id) 解釋：
若將 Id = 2 對(duì)應(yīng)圖片（第 3 張）作焦點(diǎn)，向左挪過去兩張（此時(shí)該圖靠最左），后加回partnerWidth
二題：
ABCDEABCDEABCDE
三倍于展示圖，JS 動(dòng)態(tài)生成亦可。稱之三個(gè)塊。
.moving { transition: none }
在接近塊間距時(shí)關(guān)閉動(dòng)畫移至另一塊相應(yīng)位置。
class Lunbo {
constructor(element) {
// 表示接近邊緣的圖片 Id。接近左邊緣的即第2 張圖，右邊緣的則為倒數(shù)第二張
this.closeLeftId = 1;
this.closeRightId = this.photos.length - 2;
this.photosQuantity = this.photos.length / 3;
// 當(dāng)運(yùn)動(dòng)到上面兩個(gè) Id 時(shí)默默移動(dòng)到的對(duì)應(yīng) Id
// 接近左邊時(shí)跳轉(zhuǎn)到右邊塊的第二張
// 接近右邊則跳轉(zhuǎn)到左邊塊的倒數(shù)第二張
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
代碼已通過測(cè)試。你需要碼更多的代碼，兼容各個(gè)瀏覽器，以及讓它可以被更好地維護(hù)，然后做得更好（裝）看（B）一些。
高級(jí)選項(xiàng)一味把