欲實現的圖片輪播組件的功能：
1.圖片組件分為中圖和小圖兩個部分；中圖和小圖圖片寬度可定制化；
2.中圖部分：
- 點擊向左或者向右箭頭能切換圖片（非循環輪播），同時小圖對應的圖片高亮顯示；
- 由于是非循環輪播，所以第一張中圖和最后一張中圖向左向右箭頭分別不可見；
- 中圖右下角展示圖片進度（例：10/19）
3.小圖部分：
- 點擊小圖部分的向左向右箭頭可切換小圖的分頁；
- 同樣，小圖第一頁和最后一頁，向左和向右箭頭不可見；
- 點擊小圖，大圖能切換到對應的圖片；
使用React實現上述功能，首先，劃分組件：
<SlideMS>
<SlideM/>
<SlideS/>
<SlideMS/>
組件SlideM代表中圖組件，其始終維護一個state: currentMIndex,即當前的中圖圖片的index值。
組件SlideS代表小圖組件，要維護兩個state: currentSIndex，currentSPage, 即當前的小圖圖片的index值和小圖當前的頁數；
外層組件SlideMS 接受幾個參數作為props：
<SlideMS
mediumImageArr={mediumImageArr}
eachMediumImgWidth = {616}
smallImageArr={smallImageArr}
eachSmallImgWidth = {82}
/>, document.getElementById('js-img-slide'));
SlideM、SlideS再從SlideMS中獲取參數進行內部渲染。
<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)}}
/>
當點擊中圖的切換按鈕時，計算圖片偏移量，然后將新的currentMIndex傳遞給父組件，父組件setState通知兩個子組件currentMIndex發生了改變；
小圖組件中涉及的計算比較多，可以將這些抽成方法，例如：根據給定的中圖寬度計算一頁有幾張小圖、計算小圖總頁數、根據給定的index值判斷小圖處于當前哪一頁等。
當點擊小圖組件的左右箭頭時，計算圖片的偏移量（首先計算一張中圖里有幾張小圖），然后setState修改小圖currentSPage的值。父組件setState通知兩個子組件currentMIndex發生了改變；
中圖、小圖組件分別在componentWillReceiveProps 里接收到了新的值的改變后，重新setState，更新組件內部的state，就實現了兩者之間的通信。
以上是實現的一個思路。在實際應用中，場景會復雜一些，例如，第一張圖片可能存在播放視頻的需求，還有當點擊中圖圖片時，能切換到大圖模式，大圖模式下能正常輪播，并且在關閉大圖模式時，中圖和小圖自動定位到剛才最后一張瀏覽的圖片。這時會涉及稍微復雜一些的運算，需要在此基礎上做一下兼容。
非常尷尬的一點：圖片輪播時的動畫效果，依舊使用了jquery的animate. ?? 不過這里是為了兼容IE8，如果無需兼容低版本瀏覽器，可以使用CSS3來完成這里的動畫啦~
