資訊專欄INFORMATION COLUMN
摘要：什么是輪播輪播，英文，也就是幻燈片的意思，我們可以手動(dòng)或者自動(dòng)切換一張張的照片達(dá)到顯示的目的。怎么實(shí)現(xiàn)一個(gè)輪播一般，我們可以兩種方法來(lái)實(shí)現(xiàn)輪播，例如，核心思路使用透明度來(lái)切換照片，使用距離來(lái)平移照片。
什么是輪播
輪播，英文slider，也就是幻燈片的意思，我們可以手動(dòng)或者自動(dòng)切換一張張的照片達(dá)到顯示的目的。各大電商網(wǎng)站都會(huì)使用輪播來(lái)展示商品，可以在相對(duì)較小的空間里，實(shí)現(xiàn)多種展示。
怎么實(shí)現(xiàn)一個(gè)輪播一般，我們可以兩種方法來(lái)實(shí)現(xiàn)輪播，例如，核心思路使用透明度來(lái)切換照片，使用距離來(lái)平移照片。在這里我們使用平移的方式來(lái)實(shí)現(xiàn)輪播，并通過(guò)幾組核心數(shù)據(jù)來(lái)實(shí)現(xiàn)slide的切換，此外，一般還具有多種方法可以實(shí)現(xiàn)無(wú)縫切換。
需求分解我們實(shí)現(xiàn)的輪播，所需要具有的功能可以分為以下幾部分：
點(diǎn)擊左右箭頭，前后切換slide
無(wú)縫切換輪播
點(diǎn)擊輪播中的導(dǎo)航按鈕，切換不同的slide
初始狀態(tài)會(huì)每隔3s自動(dòng)切換slide
鼠標(biāo)懸浮在slide上時(shí)，自動(dòng)輪播停止，移出后會(huì)恢復(fù)自動(dòng)輪播狀態(tài)
考慮復(fù)用性，抽象為一個(gè)組件，其他如點(diǎn)擊切換等功能考慮為插件注入
1. 向前和向后切換和無(wú)縫切換 1. 結(jié)構(gòu)和樣式我們?cè)O(shè)置兩個(gè)容器，通過(guò)在父容器使用transform進(jìn)行左右平移，translateX()是相對(duì)于自身的寬度，而在子容器里通過(guò)絕對(duì)定位來(lái)進(jìn)行平移，其中left屬性相對(duì)的是父容器的寬度，這樣父容器平移100%，子容器距離左邊-100%，就可以相互抵消。
HTML結(jié)構(gòu)如下
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%;
}
此時(shí)我們知道可以顯示第二張圖片。
2. 前后邏輯控制數(shù)據(jù)模型：
slideIndex為slide的索引，取值為0,1,2，表示始終只有三張圖片在HTML結(jié)構(gòu)當(dāng)中。
offset表示當(dāng)前距離最左邊切換圖片的數(shù)量，每次向后切換時(shí)，都會(huì)加1，取值范圍為1~圖片的總數(shù)量
相關(guān)說(shuō)明：
normalIdx()方法是一個(gè)將數(shù)字轉(zhuǎn)換為len范圍的方法，接收索引和長(zhǎng)度，返回一個(gè)在len之內(nèi)的數(shù)值，這里的len固定為3
go()方法，接收1或者-1，分別表示向前和向后移動(dòng)，以向前移動(dòng)為例，此時(shí)做了兩件事，相關(guān)所以會(huì)更新，改變?nèi)萜鞯钠?，主要?b>offset和slideIndex會(huì)發(fā)生變化，都需要調(diào)用規(guī)范化方法，使其數(shù)值始終處于3之內(nèi)。
calcDistance()方法為計(jì)算移動(dòng)距離的方法，主要有父容器和slide的距離計(jì)算。
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; // 向右移動(dòng)了一個(gè)，所有偏移量也需要加一
slideIndex += foreward; // 向右移動(dòng)了一個(gè)，所以加一，需要?dú)w三化
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. 無(wú)縫輪播
每次切換時(shí)，slide的left屬性都會(huì)改變，父容器的transform也發(fā)生改變，相互抵消，輕松實(shí)現(xiàn)無(wú)縫切換，注意: 我們這里只設(shè)置了三張照片，剛好與要求一致，并沒(méi)有對(duì)相關(guān)數(shù)據(jù)進(jìn)行計(jì)算處理。
/** 不管輪播的照片有多少，只有三欄是常駐的 * ------------------- * | | | | * ------------------------------- * | | | | | | * | | | | | | * | | 1 | 2 | 3 | | * | | | | | | * | | | | | | * ------------------------------- * | | | | * ------------------- */3. 面向?qū)ο蠡?/b>
我們將前面寫的業(yè)務(wù)代碼，用面向?qū)ο蟮乃枷雭?lái)重構(gòu)一下。
HTML發(fā)生一些改變，我們將Img通過(guò)JS動(dòng)態(tài)注入
JS部分,這里`pageNum表示圖片的總數(shù)量，可以為任意數(shù)字，renderImg()為渲染圖片的方法，主要在切換的時(shí)候改變圖片的url，第一次需要進(jìn)行初始化。
// Component
class Slider {
constructor(el) {
// omit some code
this.offset = 1;// 偏移量，即個(gè)數(shù)
this.slideIndex = 1;// slide index one of 0, 1, 2
this.pageIndex = 1;// page index of total pictures
this.pageNum = 6;// total pictures
}
// 標(biāo)準(zhǔn)化index，使index始終為0,1,2中的一個(gè)
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);
// 計(jì)算移動(dòng)距離
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;
// 頁(yè)面初始化使用，運(yùn)行一次
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功能，點(diǎn)擊對(duì)應(yīng)的小按鈕，即可跳轉(zhuǎn)到指定的slide上
5. 后記后期將考慮將輪播進(jìn)行組件化，封裝成獨(dú)立的組件，添加更多可定制的功能。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52476.html
摘要：什么是輪播輪播，英文，也就是幻燈片的意思，我們可以手動(dòng)或者自動(dòng)切換一張張的照片達(dá)到顯示的目的。怎么實(shí)現(xiàn)一個(gè)輪播一般，我們可以兩種方法來(lái)實(shí)現(xiàn)輪播，例如，核心思路使用透明度來(lái)切換照片，使用距離來(lái)平移照片。 什么是輪播 輪播，英文slider，也就是幻燈片的意思，我們可以手動(dòng)或者自動(dòng)切換一張張的照片達(dá)到顯示的目的。各大電商網(wǎng)站都會(huì)使用輪播來(lái)展示商品，可以在相對(duì)較小的空間里，實(shí)現(xiàn)多種展示。 怎...
摘要：什么是輪播輪播，英文，也就是幻燈片的意思，我們可以手動(dòng)或者自動(dòng)切換一張張的照片達(dá)到顯示的目的。怎么實(shí)現(xiàn)一個(gè)輪播一般，我們可以兩種方法來(lái)實(shí)現(xiàn)輪播，例如，核心思路使用透明度來(lái)切換照片，使用距離來(lái)平移照片。 什么是輪播 輪播，英文slider，也就是幻燈片的意思，我們可以手動(dòng)或者自動(dòng)切換一張張的照片達(dá)到顯示的目的。各大電商網(wǎng)站都會(huì)使用輪播來(lái)展示商品，可以在相對(duì)較小的空間里，實(shí)現(xiàn)多種展示。 怎...
摘要：第八集從零開始實(shí)現(xiàn)輸入框組件本集定位組件是交互的一大利器他與用戶的交流最為密切所以奠定了他在組件界的重要地位也算是一種如果可以的話本集也會(huì)一起說(shuō)完畢竟是一個(gè)類型的一起學(xué)完收獲會(huì)很大古人云組件不封輸入框，一到面試就發(fā)慌一簡(jiǎn)介大家如果對(duì)這個(gè) 第八集: 從零開始實(shí)現(xiàn)(輸入框input,textarea組件) 本集定位: input組件是交互的一大利器, 他與用戶的交流最為密切, 所以奠...
摘要：第八集從零開始實(shí)現(xiàn)輸入框組件本集定位組件是交互的一大利器他與用戶的交流最為密切所以奠定了他在組件界的重要地位也算是一種如果可以的話本集也會(huì)一起說(shuō)完畢竟是一個(gè)類型的一起學(xué)完收獲會(huì)很大古人云組件不封輸入框，一到面試就發(fā)慌一簡(jiǎn)介大家如果對(duì)這個(gè) 第八集: 從零開始實(shí)現(xiàn)(輸入框input,textarea組件) 本集定位: input組件是交互的一大利器, 他與用戶的交流最為密切, 所以奠...
閱讀 1938·2021-11-24 09:39
閱讀 3278·2021-09-22 14:58
閱讀 1162·2019-08-30 15:54
閱讀 3315·2019-08-29 11:33
閱讀 1788·2019-08-26 13:54
閱讀 1598·2019-08-26 13:35
閱讀 2468·2019-08-23 18:14
閱讀 762·2019-08-23 17:04
