摘要：使用進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析前面我們通過布局簡史與決勝未來的第四代布局技術(shù)了解了布局發(fā)展史和未來，下面，我們通過使用進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析了解一下，如何在實(shí)際項(xiàng)目中使用進(jìn)行布局，相信大家也體會到了它的便捷之處。

前面我們通過《css布局簡史與決勝未來的第四代css布局技術(shù)》了解了css布局發(fā)展史和未來，下面，我們通過《使用flex進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析》了解一下，如何在實(shí)際項(xiàng)目中使用flex進(jìn)行布局，相信大家也體會到了它的便捷之處。今天我們就深入項(xiàng)目的細(xì)節(jié)，說說每一個切圖人員繞不過去的坎兒，也是jser必須要面對的一個常規(guī)任務(wù)--《網(wǎng)易云音樂高復(fù)用的響應(yīng)式輪播圖的實(shí)現(xiàn)》

輪播圖相對于大家的工作，就和你首次去女朋友家的準(zhǔn)備工作一樣，重要而且繞不過去。遺憾的是，大部分人寫輪播圖都跟第一次見家長一樣，沒什么經(jīng)驗(yàn)。

很多人想自己寫一套輪播圖，然后以后工作中不斷的完善，最后形成自己的插件庫，遺憾的是有這個想法的大部分人，到了行動的時候才發(fā)現(xiàn)，想要實(shí)現(xiàn)它，比兌現(xiàn)“結(jié)婚就買套房”的諾言都難。最后只好迫于項(xiàng)目壓力和自身技能水平，變成了插件的搬運(yùn)工。

可是插件搬運(yùn)工有三個問題，首先這個東西對一個人的技術(shù)成長沒什么用，其次也是重點(diǎn)，插件并不能完全符合項(xiàng)目需求，自己又沒有能力進(jìn)行二次開發(fā)，遇上詭異bug也只能聽天由命，繼續(xù)踏上尋找更合適的插件的慢慢征途。最后，有些插件很重，很臃腫，但你只需要的是最基礎(chǔ)的輪播功能而已。你會為了吃上一碟醋，專門包頓餃子嗎？我想不會。那你為什么僅僅為了使用一個輪播圖會而項(xiàng)目里面使用幾百k甚至上M的插件？

很多人可能會說因?yàn)椴粫?，好，今天我們就來?shí)現(xiàn)一個，你會發(fā)現(xiàn)原來js的世界如此的簡單和美好，有找插件的功夫，你都能開發(fā)出8個插件了。

=

往上看，大家都認(rèn)的啥叫輪播圖，仔細(xì)看下你第一步要做的至少說我拖著一個東西得能動，哪怕是一個紅色方塊唄。這里就得說下拖拽，拖拽改變的無非就是left和top值（外星人才改right和bottom，我們地球人一般都用left和top，別問我為什么）,先讓他在一個方向上動起來。

仔細(xì)看，無非就是用了移動端事件而已，分分鐘就能理解，問題是很多同學(xué)會說，老師，我不理解這里，這是啥，

 var currPoint = e.changedTouches[0].pageX;
 var newLeft  = currPoint - disX;
 oDiv.style.left = newLeft +"px";

這個又是啥？

var currPoint = e.changedTouches[0].pageX;
var newLeft  = currPoint - disX;
oDiv.style.left = newLeft +"px";
oDiv.addEventListener("touchmove", doUp,false);
oDiv.addEventListener("touchend", doUp,false);

其實(shí)這些就是核心內(nèi)容，簡單的說就是一張圖，非常簡單的圖，你一看就能懂。

!

其實(shí)就是算藍(lán)線的距離只要藍(lán)線正確，位置就錯不了，真要是理解不了也沒事，你就把他當(dāng)成公式記住一點(diǎn)毛病也沒有。有了這些基礎(chǔ)知識就好辦了，搭個架子，

至少現(xiàn)在一拖拽走起來了，這里簡單吧，連縱向都不用考慮，輪播比拖拽還簡單，只考慮水平方向，

問題是松手了以后，輪播圖的，每一項(xiàng)沒去正確的位置，啥叫正確的位置，其實(shí)每次改變的left的值將好是一個輪播圖的寬度，上圖。

!你先別管別的，看紅框就是手機(jī)屏幕寬度，每次其實(shí)就是移動一個格子。那我只要定一個iNow值記錄移動幾個格子，只要iNow正確就一切OK了唄，說干就干。

強(qiáng)調(diào)一點(diǎn)，getBoundingClientRect()，這里我為什么沒用offsetLeft呢？因?yàn)閷?shí)際項(xiàng)目里面不可能輪播圖的外層什么都不套，或者說萬一有margin、padding，輪播圖的距離就不對了，使用offsetLeft是不具有項(xiàng)目的實(shí)用性的，做演示還行，實(shí)際項(xiàng)目那么寫就廢了。

最后我說一個無限輪播圖，其實(shí)就是算數(shù)字的，!)所謂無限輪播的原理，就是當(dāng)iNow 等于最右邊的0的時候，拉回到紅框位置，左側(cè)是當(dāng)iNow 等于 最左邊的4的時候，iNow等于6.

很多人有了源代碼就忽略了基礎(chǔ)的學(xué)習(xí)，直接拿過去用了，那跟直接找插件沒區(qū)別，所以這個就當(dāng)一個小練習(xí)吧。

四個練習(xí)：

1.實(shí)現(xiàn)多屏幕相應(yīng)適配

2.實(shí)現(xiàn)無線輪播

3.實(shí)現(xiàn)如果滑動距離不超過50px就不播下一張

4.實(shí)現(xiàn)定時器自動輪播!

這里我把上面四個練習(xí)解決方法的左側(cè)代碼放出來作為提示，大家盡量學(xué)會實(shí)現(xiàn)。

注意學(xué)習(xí)是一個過程，不是一個結(jié)果，得到最終的源碼不重要，學(xué)會自己實(shí)現(xiàn)這個才重要，畢竟網(wǎng)上有太多的資源和插件代碼，如果那個有用，那么每一個人的工資都應(yīng)該非常高才對。那為什么很多人的技術(shù)水平并不高，工資也不理想呢，是因?yàn)榇蠹抑慌θサ玫浇Y(jié)果，而忽視了技術(shù)的實(shí)現(xiàn)過程。端盤子和吃菜誰都會，但是飯店卻只會給廚師高工資就是這個道理。我們要做的是廚師，不是端盤子的服務(wù)員或者食客（此處僅為了說明過程的重要性，無其他意思）。

就說這么多吧，最后一句。牛頓說過，我有一個蘋果我吃了你瞅著我就比你幸福，錯了牛頓說他沒說過這句話，他說的是，我有一個思想，你也有一個，咱倆一交換，就又生一個思想（牛頓好像大意如此，大家理解就OK）。

所以大家有問題可以留言，根據(jù)大家的留言我會提供更有針對性的課程。