深入解析js輪播插件核心代碼的實現(xiàn)過程
輪播效果在網(wǎng)頁中用的很多，swiper是其中最有代表性的作品,它支持水平和豎直滑動，還有反彈效果，兼容移動端和pc端。當然代碼量也是相當大的，單是js就有5300行（3.4.0的未縮版本），若不考慮代碼利用率和加載速度直接就用了，在移動端比較慎重，比如京東(m.jd.com)的輪播就沒有用它，而是自己實現(xiàn)了類似的功能,代碼量很少的樣子（格式化之后看起來二三百行左右的樣子）。那么這個功能如果自己來實現(xiàn)，要怎么做呢？
準備工作
1. 準備幾張圖片（我這里放了四張）
2. 搭建目錄結(jié)構(gòu)（html+css+images+js)
3. 編寫代碼，實現(xiàn)初始狀態(tài)的顯示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>輪播</title>
<link rel="stylesheet" type="text/css" href="slider.css" rel="external nofollow" >
<script src="slider.js"></script>
</head>
<body>
<div id="slider" class="slider-wrapper">
<ul class="slider-items">
<li class="slider-item"><img src="images/pic21.gif" alt="1"></li>
<li class="slider-item"><img src="images/pic22.gif" alt="2"></li>
<li class="slider-item"><img src="images/pic23.gif" alt="3"></li>
<li class="slider-item"><img src="images/pic24.gif" alt="4"></li>
</ul>
</div>
<script>
Slider('#slider',{});
</script>
</body>
</html>
寫幾行樣式，先讓頁面有一種滾動前的初始畫面。
body {
padding: 0;
min-width: 300px;
max-width: 640px;
margin: 0 auto;
}
ul {
list-style: none;
}
ul,li {
margin: 0;
padding: 0;
}
.slider-wrapper {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slider-items {
position: relative;
height: 100%;
}
.slider-item {
float: left;
text-align: center;
cursor: pointer;
}
.slider-item > img {
width: 100%;
pointer-events: none;
}
.slider-pagination {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s;
transition-duration: .3s;
}
.slider-bullet {
width: 8px;
height: 8px;
margin: 0 5px;
display: inline-block;
border-radius: 100%;
background-color: black;
opacity: .2;
cursor: pointer;
}
.slider-bullet-active {
opacity: 1;
background-color: #007aff;
}
.slider-button {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
margin-top: -25px;
z-index: 10;
font-size: 4rem;
color: gray;
-webkit-user-select:none;
user-select:none;
}
.next {
right: 0px;
}
.prev {
left: 0px;
}做好這個靜態(tài)頁，可以幫助我們在開發(fā)過程中預覽效果，方便查找問題，欣賞制作過程帶來的樂趣。
搭建程序骨架
接下來就是寫js了，先搭一個程序的架子，我這里仿一下jQ的無new式設計（其實是自己在內(nèi)部自動實現(xiàn)new的過程）
;( function( global, factory ) {
"use strict";
if ( typeof module === "object" && typeof module.exports === "object" ) {
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "Slider requires a window with a document" );
}
return factory( w );
};
} else {
factory( global );
}
// Pass this if window is not defined yet
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ){
"use strict";
function Slider( selector, options ) {
return new Slider.init( selector, options );
}
Slider.init=function(selector, params){
next:function(){},<br> prev:function(){},<br> move:function(){}
}<br> Slider.init.prototype = Slider.prototype = {<br> <br> };
return Slider
});
架子搭好之后，先停下來喝口水，思考一下，最終我們的這個插件要實現(xiàn)哪些功能。
1. 點擊左、右箭頭可以控制滾動
3. 可以向左、向右拖拽滑動
4. 返彈效果
5. 自動輪播效果
6. 頁碼指示
這些功能該怎么實現(xiàn)？
先畫幾張圖，在紙上模擬一下這個過程，搞明白之后，再用代碼來讓計算機執(zhí)行。下圖中的藍框代表顯示器的寬度，紅框代表圖片所在容器的實際寬度。我只要移動紅框，那么在屏幕上看起來，就會有輪播滾動的效果。原理看起來是不是很簡單？本著先易后難，循序漸進的作戰(zhàn)方針，先不考慮循環(huán)滾動。假設屏幕上顯示的是圖片1，此時只要把紅框往左移一個屏的寬度，那么就會顯示2，再移一屏，就可以顯示3. 向右滾動正好相反。
移動可以用css3的transform:translate3d來做，也可以用js變化left/top來做，用translate3d來做的核心代碼如下：
function translate3d(element,x,y) {
x = x === undefined ? 0 : x;
y = y === undefined ? 0 : x;
element.style['-webkit-transform'] = 'translate3d(-'+x+'px,'+y+'px,0px)';
element.style['transform'] = 'translate3d(-'+x+'px,'+y+'px,0px)';
}
function transition(element,time){
element.style['-webkit-transition-duration'] = time+'ms';
element.style['transition-duration'] = time+'ms';
}
x控制左右移動，y控制豎直移動（本例中暫不考慮），z固定（0px）. 當x移動的距離是正數(shù)的時候，向左滾動--prev，為負數(shù)的時候向右滾動--next
fn.next = function(){
var activeIndex = ++this.activeIndex;
translate3d(this.wrap,activeIndex*this.slideWidth);
transition(this.wrap,this.params.speed);
}
fn.prev = function(){
var activeIndex = --this.activeIndex;
translate3d(this.wrap,activeIndex*this.slideWidth);
transition(this.wrap,this.params.speed);
}
由于圖片數(shù)量是有限的，不能一直滾動，如果到頭了，需要做一些處理。因此需要判斷activeIndex（當前顯示的圖片索引）的值。如果到了最右邊就不能再允許滾動了。
var activeIndex = this.lastIndex--;<br>if(activeIndex > this.lastIndex){
return;
}
同理，到了最左邊，也不能繼續(xù)往左滾動了（聽起來是一句非常正確的廢話）
var activeIndex = --this.activeIndex;
if(activeIndex < this.firstIndex){
return;
}
現(xiàn)在要考慮自動滾動的情況，如果是自動輪播的情況，那就不能直接return; 要么當?shù)竭_最右邊的時候，activeIndex賦成firstIndex，當達到最左邊的時候，activeIndex賦成lastIndex; 這樣做的實際效果看起來就是像蕩秋千一樣，這顯然不是我們想要的效果。要么跳到最前面重新開始，這做出來的實際效果一點也不連續(xù)。最后決定去看看swiper是怎么實現(xiàn)的。swiper的做法就是把第一張復制一份放到最后面，把最后一張復制一份到最前面?！∪缦聢D所示：
第一張和第四張都被復制了一份。對應的代碼如下：
fn.createLoopItems = function(){
var lastItem = this.slides[this.lastIndex];
var firstItem = this.slides[this.firstIndex];
var prevItem = lastItem.cloneNode(true);
var nextItem = firstItem.cloneNode(true);
var sliderCount = this.sliderCount+2;
var slideWidth = this.slideWidth;
this.slideStack.push(this.firstIndex);
this.slideStack.unshift(this.lastIndex);
this.wrap.insertBefore(prevItem,firstItem);
this.wrap.appendChild(nextItem);
this.wrap.style.width = slideWidth * sliderCount + 'px';
translate3d(this.wrap,slideWidth);
this.activeIndex += 1;
this.sliderCount = sliderCount;
this.lastIndex += 2;
}
不得不承認這個做法很巧妙。隨便我們往哪個方向翻，都不至于出現(xiàn)空白期。當翻到最未尾（數(shù)字4）的時候，還可以再翻一頁，即第一張的復制品，雖然不是真的第一張，但是看起來就像是平滑的過渡到了第一張一樣。不過這是臨時的，我們需要在過渡完之后，立即回到真正的1的位置上去。因為我們實際上在未端只補了一張，翻完這一頁，如果不進一步處理，還是會到頭。這時，就是問題的關鍵了。當我們往右翻，從第四張翻到復制的第一張時，需要悄悄地，人不知，鬼不覺的把紅框的位置移到1的真身上來。同時把activeIndex也置為圖1的索引。那么問題又來了，怎么才能做到人不知鬼不覺的暗渡陳倉呢？其實很簡單，只要把移位動畫的時間改成0就可以了。關鍵代碼如下：
transition(this.wrap,0);
不過這一步要在從4變?yōu)?，剛停下來的時候，立即執(zhí)行。做早了，就會感覺是直接從4跳到1，沒有動畫效果，做晚了，就會出現(xiàn)空白，并因為索引溢出而報錯。所以這里需要一個修復方法：
fn.fixedPrevLoop = function(){
var that = this;
setTimeout(function(){
that.fixedLoop(that.lastIndex-1)
},that.params.speed);
}
或者：
this.container.addEventListener('transitionend',function(){
//動畫結(jié)速之后再執(zhí)行判斷是否要修復
},false);
做完這一步，就看起來有連續(xù)滾動的效果了，在這個基礎上實現(xiàn)自動輪播就好辦了，只要用定時器，每隔一段時間就執(zhí)行一下自身就可以了。代碼如下：
fn.autoPlay = function(){
var that = this;
if(!this.params.autoplay){
return;
}
this.timeId = setTimeout(function(){
that.next();
//that.prev();
that.autoPlay();
},this.params.delay);
}
我注釋掉了prev(), 默認都是向右自動輪播。如果要改成是往左輪播，只要在這里加一個一個配置選擇就好了。自動循環(huán)都做好了，在此基礎上點擊翻頁，也是很容易的事情了，給按鈕邦定一個click事件，如果是右邊的，就調(diào)用next()方法，反之則調(diào)用prev()方法。不過我這里沒有這樣做，因為考慮到后面我們還要做手勢（鼠標）拖動翻頁效果，我決定用事件來做。讓事件統(tǒng)統(tǒng)都冒泡到包裝容器上去處理，這也是提升性能的常用技巧之一。
fn.bindEvents = function(){
if(Device.desktop){
this.container.addEventListener('mousedown',this,false);
this.container.addEventListener('mousemove',this,false);
document.addEventListener('mouseup',this,false);
}else{
this.container.addEventListener('touchstart',this,false);
this.container.addEventListener('touchmove',this,false);
document.addEventListener('touchend',this,false);
}
this.container.addEventListener('transitionend',this,false);
this.container.addEventListener('click',this,false);
}
為什么這里的addEventListener為什么是邦定this而不是一個函數(shù)呢？簡單說，是因為上下文中有一個handleEvent方法，可以被函數(shù)自動捕獲到，這個函數(shù)名是固定的，不明白的可以自行搜索這個函數(shù)名。
fn.handleEvent = function(e){
var type = e.type;<br> //注意這里邊的this<br>}這樣做的好處是可以維持事件邦定的那個函數(shù)的上下文。簡單說就是不用操心this的指向會變。
做完這一步，就可以做拖動翻頁了。在pc上用鼠標，在手機上用手指，處理的方式都是一樣的，按下，移動，釋放這三個事件。按下的時候，記住初始坐標，移動的時候和這個坐標進行對比，計算出移動的距離，然后更新到移動的對象上（紅框）。這里邊有幾個地方需要注意：
1. 如果移動的時候，不是直線，x坐標和y坐標都有改變，是判斷成水平拖動還是垂直拖動？
2. 在pc上，如何判斷是拖動，拖出屏幕外了怎么處理？
3. 反彈怎么做？
對于第1點，可以比較兩個方向距離的大小，誰大聽誰的。如果指向了是水平滾動，那么可以直接忽略豎直方向的變化。
對于第2點，可以把mouseup放到document上去，最好加一個移動的距離大小判斷，如果超過容器的大小，就當作是釋放了，該反彈的反彈，該滑頁的滑頁。
對于第3點，在拖動釋放的時候，判斷移動距離，比如拖動的距離小于屏寬的1/3，就反方向translate相應的距離回去，甚至都不用關心這個距離，反正這時的activeIndex沒有更新的，直接回到這個activeIndex對應的頁就算是反彈了。代碼就是這樣：
fn.stop = function(){
this.axis.x = 0;
translate3d(this.wrap,this.slideWidth*this.activeIndex);
transition(this.wrap,this.params.speed);
}
接下來就是做頁碼指示器了，這個簡單，翻頁成功之后就更新一下對應的小點就是了。由于我們?nèi)藶榈牟辶藘蓚€頁面進去，索引數(shù)和頁碼數(shù)就對應不起來了，實際參與滾動的圖片有6張，但是只能顯示4個點。我做的時候走了一些彎路，現(xiàn)在總結(jié)起來無非就是兩點：
1. 給小圓點加一個屬性用來標記是哪個頁面。用于處理點擊滾動的時候，知道是跳到哪個頁面。
2. 用一個數(shù)組來保存頁面索引，比如【3，0，1，2，3，1】，這樣當自動或拖動翻頁的時候，可以通過activeIndex的值，確定要高亮哪個頁碼指示器。（小圓點）
也可能還有更好的方法，暫時就先這樣實現(xiàn)吧。先把功能做出來，后面有時間，有靈感了再去優(yōu)化。
到這里，幾本上就做完了，只是還要再完善一些邊際情況，比如一張圖都沒有的情況，默認參數(shù)的處理等。
思考
除了這個方法之外是不是有其它解決方法呢？比如下圖這樣，紅框中只放三張，多余的疊在屏后面，移動的時候不是移紅框，而是真實的移動圖片？
這種方法也是可以行的通的，不過我在嘗試的時候，發(fā)現(xiàn)這種方法在手機上有些卡頓，在電腦上看，容器邊框會有閃動，原因沒有深入去查了。
咳！咳..，下載源碼請上github.com ，在線預覽無圖片版本
小結(jié)一下
寫到這里的時候，主體的邏輯差不多就實現(xiàn)了, 只用了大約三百多行代碼，雖然很精簡，但是這里還有許多東西沒有考慮進去，比如豎直方向的滾動，兼容性問題等等。通過畫圖的方法來幫助理清思路，遇到困難，可以借鑒別人的實現(xiàn)方法，參考但不是原封不動的復制粘貼。代碼組織要考慮擴展性和可讀性，先從程序的骨架寫起，然后再去寫方法，處理細節(jié)問題。通過動手實踐，可以發(fā)現(xiàn)一些看似簡單的東西，做起來也不是那么容易的。自己做出來之后，再去看別人寫的好的代碼，就會知道人家哪些地方比我實現(xiàn)的好，有哪些值得學習的地方。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js微信分享接口調(diào)用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Layer.js實現(xiàn)表格溢出內(nèi)容省略號顯示,懸停顯示全部的方法
今天小編就為大家分享一篇Layer.js實現(xiàn)表格溢出內(nèi)容省略號顯示,懸停顯示全部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較
這篇文章主要介紹了promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較，在es6中引入的原生Promise為js的異步回調(diào)問題帶來了一個新的解決方式co模塊搭配Generator函數(shù)的同步寫法，更是將js的異步回調(diào)帶了更優(yōu)雅的寫法。感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
JS實現(xiàn)transform實現(xiàn)扇子效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)transform實現(xiàn)扇子效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細介紹了如何利用JavaScript語言實現(xiàn)多彩線條擺出心形效果，文中的實現(xiàn)步驟講解詳細，快跟隨小編一起動手嘗試一下吧2022-07-07
JavaScript動畫實例之粒子文本的實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript動畫實例之粒子文本的實現(xiàn)方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
網(wǎng)上找的，經(jīng)我整理添加demo如下2009-06-06
Slider 焦點圖會在很多的網(wǎng)站上見到，在本文為大家詳細介紹下具體的實現(xiàn)過程，下面的源碼大家可以運行下2013-10-10
流行的 JavaScript 庫有jQuery，MooTools，Prototype，Dojo和YUI等，這些 JavaScript 庫功能豐富，加上它們眾多的插件，幾乎能實現(xiàn)任何你需要的功能2011-06-06