欲實(shí)現(xiàn)的圖片輪播組件的功能：
1.圖片組件分為中圖和小圖兩個(gè)部分射亏；中圖和小圖圖片寬度可定制化；
2.中圖部分：
- 點(diǎn)擊向左或者向右箭頭能切換圖片（非循環(huán)輪播），同時(shí)小圖對(duì)應(yīng)的圖片高亮顯示；
- 由于是非循環(huán)輪播弱判，所以第一張中圖和最后一張中圖向左向右箭頭分別不可見(jiàn)；
- 中圖右下角展示圖片進(jìn)度（例：10/19）
3.小圖部分：
- 點(diǎn)擊小圖部分的向左向右箭頭可切換小圖的分頁(yè)锥惋；
- 同樣昌腰，小圖第一頁(yè)和最后一頁(yè)，向左和向右箭頭不可見(jiàn)膀跌；
- 點(diǎn)擊小圖遭商，大圖能切換到對(duì)應(yīng)的圖片；
使用React實(shí)現(xiàn)上述功能捅伤，首先劫流，劃分組件：
<SlideMS>
<SlideM/>
<SlideS/>
<SlideMS/>
組件SlideM代表中圖組件，其始終維護(hù)一個(gè)state: currentMIndex,即當(dāng)前的中圖圖片的index值丛忆。
組件SlideS代表小圖組件祠汇，要維護(hù)兩個(gè)state: currentSIndex，currentSPage, 即當(dāng)前的小圖圖片的index值和小圖當(dāng)前的頁(yè)數(shù)熄诡；
外層組件SlideMS 接受幾個(gè)參數(shù)作為props：
<SlideMS
mediumImageArr={mediumImageArr}
eachMediumImgWidth = {616}
smallImageArr={smallImageArr}
eachSmallImgWidth = {82}
/>, document.getElementById('js-img-slide'));
SlideM座哩、SlideS再?gòu)腟lideMS中獲取參數(shù)進(jìn)行內(nèi)部渲染。
<SlideM
mediumImageArr={mediumImageArr}
currentMIndex={currentMIndex}
eachMediumImgWidth = {eachMediumImgWidth}
callback={(index)=>{self.setSmallIndex(index)}}
/>
<SlideS
smallImageArr={smallImageArr}
currentSIndex={currentSIndex}
eachSmallImgWidth={eachSmallImgWidth}
eachMediumImgWidth = {eachMediumImgWidth}
callback={(index)=>{self.setMediumIndex(index)}}
/>
當(dāng)點(diǎn)擊中圖的切換按鈕時(shí)粮彤，計(jì)算圖片偏移量，然后將新的currentMIndex傳遞給父組件姜骡，父組件setState通知兩個(gè)子組件currentMIndex發(fā)生了改變导坟；
小圖組件中涉及的計(jì)算比較多，可以將這些抽成方法圈澈，例如：根據(jù)給定的中圖寬度計(jì)算一頁(yè)有幾張小圖惫周、計(jì)算小圖總頁(yè)數(shù)、根據(jù)給定的index值判斷小圖處于當(dāng)前哪一頁(yè)等康栈。
當(dāng)點(diǎn)擊小圖組件的左右箭頭時(shí)递递，計(jì)算圖片的偏移量（首先計(jì)算一張中圖里有幾張小圖），然后setState修改小圖currentSPage的值啥么。父組件setState通知兩個(gè)子組件currentMIndex發(fā)生了改變登舞；
中圖、小圖組件分別在componentWillReceiveProps 里接收到了新的值的改變后悬荣，重新setState菠秒，更新組件內(nèi)部的state，就實(shí)現(xiàn)了兩者之間的通信氯迂。
以上是實(shí)現(xiàn)的一個(gè)思路践叠。在實(shí)際應(yīng)用中言缤，場(chǎng)景會(huì)復(fù)雜一些，例如禁灼，第一張圖片可能存在播放視頻的需求管挟，還有當(dāng)點(diǎn)擊中圖圖片時(shí)，能切換到大圖模式弄捕，大圖模式下能正常輪播僻孝，并且在關(guān)閉大圖模式時(shí)，中圖和小圖自動(dòng)定位到剛才最后一張瀏覽的圖片察藐。這時(shí)會(huì)涉及稍微復(fù)雜一些的運(yùn)算皮璧，需要在此基礎(chǔ)上做一下兼容。
非常尷尬的一點(diǎn)：圖片輪播時(shí)的動(dòng)畫效果分飞，依舊使用了jquery的animate. ?? 不過(guò)這里是為了兼容IE8悴务，如果無(wú)需兼容低版本瀏覽器，可以使用CSS3來(lái)完成這里的動(dòng)畫啦~
