欲實現的圖片輪播組件的功能：
1.圖片組件分為中圖和小圖兩個部分；中圖和小圖圖片寬度可定制化；
2.中圖部分：

• 點擊向左或者向右箭頭能切換圖片（非循環輪播），同時小圖對應的圖片高亮顯示；
• 由于是非循環輪播，所以第一張中圖和最后一張中圖向左向右箭頭分別不可見；
• 中圖右下角展示圖片進度（例：10/19）

3.小圖部分：

• 點擊小圖部分的向左向右箭頭可切換小圖的分頁；
• 同樣，小圖第一頁和最后一頁，向左和向右箭頭不可見；
• 點擊小圖，大圖能切換到對應的圖片；

slide.jpg

使用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來完成這里的動畫啦~