如何使用React完成一個圖片輪播組件

這篇文章將為大家詳細講解有關如何使用React完成一個圖片輪播組件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯專注于企業(yè)成都全網營銷推廣、網站重做改版、麻章網站定制設計、自適應品牌網站建設、html5、成都做商城網站、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為麻章等各大城市提供網站開發(fā)制作服務。

                                                       這次給大家?guī)碛肦eact完成一個圖片輪播組件，使用React完成一個圖片輪播組件的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

使用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發(fā)生了改變；

小圖組件中涉及的計算比較多，可以將這些抽成方法，例如：根據給定的中圖寬度計算一頁有幾張小圖、計算小圖總頁數、根據給定的index值判斷小圖處于當前哪一頁等。

當點擊小圖組件的左右箭頭時，計算圖片的偏移量（首先計算一張中圖里有幾張小圖），然后setState修改小圖currentSPage的值。父組件setState通知兩個子組件currentMIndex發(fā)生了改變；

中圖、小圖組件分別在componentWillReceiveProps 里接收到了新的值的改變后，重新setState，更新組件內部的state，就實現了兩者之間的通信。

以上是實現的一個思路。在實際應用中，場景會復雜一些，例如，第一張圖片可能存在播放視頻的需求，還有當點擊中圖圖片時，能切換到大圖模式，大圖模式下能正常輪播，并且在關閉大圖模式時，中圖和小圖自動定位到剛才最后一張瀏覽的圖片。這時會涉及稍微復雜一些的運算，需要在此基礎上做一下兼容。

非常尷尬的一點：圖片輪播時的動畫效果，依舊使用了jquery的animate.

以上就是用React完成一個圖片輪播組件的詳細內容，更多請關注創(chuàng)新互聯其它相關文章！

關于“如何使用React完成一個圖片輪播組件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章題目：如何使用React完成一個圖片輪播組件
轉載來于：http://bm7419.com/article38/pssssp.html

成都網站建設公司_創(chuàng)新互聯，為您提供、域名注冊、ChatGPT、微信公眾號、外貿建站、電子商務

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯