react實現pc端圖片輪播

1.需求
有多張圖片和左右兩個箭頭，點擊箭頭可以平穩滑動，右側滑動到最後一張圖會隱藏右箭頭，左側同理

2 解決方案：使用react, 配合transform來實現移動

1. 首先，給出div結構, 首屏展示幾張圖，需要最外層類bd設置的寬度width和每一個a設置的寬度，來控制，需要自己控制。

//dom結構
         <div>
            <div className="bd basefix ">
                <div className="pro_list_wrap"  style={{ width: width, transition: transition, transform: transform }} id="hot_scenics_list" data-count="8" >
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d51680?fluxentrance=10410&amp;FromMenu=hotel"  data-reactid="79">
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_3.jpg" /> 
                        <h3 data-reactid="81">三亞灣</h3>
                        <p className="summary" title="灣長沙細，岸上綠樹如帶，是南國海濱最美的/“椰夢長廊/”" >灣長沙細，岸上綠樹如帶，是南國海濱最美的/“椰夢長廊/”</p>
                    </a>
                    
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d3226?fluxentrance=10410&amp;FromMenu=hotel"  data-reactid="83">
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_2.jpg" />
                        <h3 data-reactid="85">亞龍灣</h3>
                        <p className="summary" title="我國唯一具有熱帶風情的國家級旅遊度假區，終年可游泳，被譽爲/“天下第一灣/”。" >
                            我國唯一具有熱帶風情的國家級旅遊度假區，終年可游泳，被譽爲/“天下第一灣/”。
                        </p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d65650?fluxentrance=10410&amp;FromMenu=hotel"  >
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_4.jpg" />
                        <h3 data-reactid="89">海棠灣</h3>
                        <p className="summary" title="海棠灣內有/“神州第一泉/”南田溫泉、鐵爐港、伊斯蘭古墓羣、海棠秀、蜈支洲島等美景" >海棠灣內有/“神州第一泉/”南田溫泉、鐵爐港、伊斯蘭古墓羣、海棠秀、蜈支洲島等美景</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d3244?fluxentrance=10410&amp;FromMenu=hotel" >
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_1.jpg" />
                        <h3 data-reactid="93">蜈支洲島</h3>
                        <p className="summary" title="最美情人島，中國的馬爾代夫！" data-reactid="94">最美情人島，中國的馬爾代夫！</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d48963?fluxentrance=10410&amp;FromMenu=hotel" >
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_5.jpg" />
                        <h3 data-reactid="97">西島</h3>
                        <p className="summary" title="海南第二大島，潛水，摩托艇，空中拖傘，玻璃船海底觀光等各式活動應有盡有。">海南第二大島，潛水，摩托艇，空中拖傘，玻璃船海底觀光等各式活動應有盡有。</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/search?fluxentrance=10410&amp;keywords=%u4E03%u4ED9%u5CAD&amp;FromMenu=hotel"  data-reactid="99">
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_7.jpg" />
                        <h3 data-reactid="101">七仙嶺</h3>
                        <p className="summary" title="熱帶雨林，野溪溫泉融爲一體，擁抱大自然" data-reactid="102">熱帶雨林，野溪溫泉融爲一體，擁抱大自然</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d74247?fluxentrance=10410&amp;FromMenu=hotel"  data-reactid="103">
                        <img width="280" height="200" alt="" src="//images4.c-ctrip.com/target/hotel/75000/74159/6d56f53077c547038f0ee7827d347e73_300_225.jpg" data-reactid="104"/>
                        <h3 data-reactid="105">亞龍灣熱帶天堂森林公園</h3>
                        <p className="summary" title="各種熱帶雨林森林奇景！非誠勿擾2電影拍攝地！" data-reactid="106">各種熱帶雨林森林奇景！非誠勿擾2電影拍攝地！</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d3231?fluxentrance=10410&amp;FromMenu=hotel" >
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_6.jpg"/>
                        <h3>南田溫泉</h3 >
                        <p className="summary" title="天然椰林，巴厘島風情，神州第一泉！">天然椰林，巴厘島風情，神州第一泉！</p>
                    </a>
                </div>
            </div>

            <a href="javascript:;" className={LArrowClaName} onClick={() => this.handleclickPrev()} />
            <a href="javascript:;" className={RArrowClaName} onClick={() => this.handleclickNext()} />
        </div>

//css

.bd {
    width:894px;
    margin:0 auto;
    overflow: hidden;
}

.basefix:after{
    clear: both;
    content: '.';
    display: block;
    height: 0;
    overflow: hidden;
}

.pro_list_recomm{ float:left; display:inline; width:280px; padding-bottom:10px; margin:0 8px;border:#F7F7F7 1px solid; border-bottom-color:#D6D6D6;}
.pro_list_recomm:hover{ text-decoration:none; border:#cbcbcb 1px solid;box-shadow:1px 1px 4px #ccc}
.pro_list_recomm img{ display:block; width:280px; height:200px;}
.pro_list_recomm h3,.pro_list_recomm .summary{ padding:0 10px; overflow:hidden;}
.pro_list_recomm h3{ font:18px/24px microsoft yahei; margin:8px 0 5px 0; height:24px; overflow:hidden;}
.pro_list_recomm .summary{ color:#999; width:260px;height:40px; overflow:hidden}

.arrow_l{ left:0;}
.arrow_r{ right:0;}
.arrow_l,.arrow_r{ position:absolute; top:15%; height:40px; width:40px; margin-top:-34px; background-color:#000; opacity:.3; transition:all 0.3s ease-in 0s; filter:alpha(opacity=30); 
    background-image: url(//pic.c-ctrip.com/VacationOnlinePic/TicketHotel/un_sce_htl.png);
    background-repeat: no-repeat;}
.arrow_l:hover,.arrow_r:hover{ opacity:.8;filter:alpha(opacity=80); transition:all 0.8s ease-in 0s;}
.arrow_l{ background-position:-158px -130px}
.arrow_r{ background-position:-156px -240px}

2. 然後外層div設置style={{width:“10000px”}，由於在bd中設置了overflow: hidden，就可以使超出div寬度的其餘圖片被隱藏。當點擊右側按鈕時候，該div應該整體像左滑動，比如第一次點擊右按鈕，div向左滑動300px（這個每次滑動多少是由你一個item寬度+padding 大概計算出來的）, 當你第二次點擊右按鈕，div整體向左滑動300*2，另外一邊同樣，所以可以通過旋轉控制div的滑動。

3. 除了整體的邏輯之外，還需要做一些邊界處理，實現過程中使用一個狀態變量來控制邊界

4. 完整的react代碼

import React from 'react'
export default class PcSwiper extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            //圖片輪播div樣式相關參數
            width: '10000px',
            transition: '500ms ease-out',
            transform: 'translatex(0px)',
            countnum: 8,     //圖片數量
            curPageIndex: 0, //點擊右箭頭+1，左箭頭減1
            viewcount: 3,    //初始展示圖片數量（和div寬度相關） 
            Larrowstate: true,
            Rarrowstate: true,
        }
    }
    //函數
    handleclickPrev(){
        let { countnum,viewcount,curPageIndex,Rarrowstate } = this.state
        if(curPageIndex === countnum - viewcount){
            this.setState({
                Rarrowstate:!Rarrowstate 
            })
        }
        this.getPage(curPageIndex-1)
    }

    handleclickNext(){
        let { countnum,viewcount,curPageIndex,Rarrowstate } = this.state
        if (curPageIndex < 0) {
            curPageIndex = 0
        }
        if(curPageIndex === 0){
            this.setState({
                Larrowstate:true
            })
        }
        this.getPage(curPageIndex + 1)
    }

    getPage(value) {
        let { countnum,viewcount,Larrowstate,Rarrowstate} = this.state
        let n = countnum - viewcount
        //一項的寬度
        let itemwidth = 300
        let transform = 'translatex(-' + value * itemwidth + 'px)'
        value > n || 0 > value || this.setState({transform:transform})
        this.setState({
            curPageIndex: value,
        })
        if (value == 0) {
            this.setState({
                Larrowstate: !Larrowstate
            })
        }
        if (value == n) {
            this.setState({
                Rarrowstate: !Rarrowstate
            })
        }
    }
    render(){
        let { width,transition,transform,Larrowstate,Rarrowstate } = this.state
        let LArrowClaName = Larrowstate ? 'arrow_l' : 'hidden'
        let RArrowClaName = Rarrowstate ? 'arrow_r' : 'hidden'
        return (
        <div>
            <div className="bd basefix ">
                <div className="pro_list_wrap"  style={{ width: width, transition: transition, transform: transform }} id="hot_scenics_list" data-count="8" >
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d51680?fluxentrance=10410&amp;FromMenu=hotel"  data-reactid="79">
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_3.jpg" /> 
                        <h3 data-reactid="81">三亞灣</h3>
                        <p className="summary" title="灣長沙細，岸上綠樹如帶，是南國海濱最美的/“椰夢長廊/”" >灣長沙細，岸上綠樹如帶，是南國海濱最美的/“椰夢長廊/”</p>
                    </a>
                    
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d3226?fluxentrance=10410&amp;FromMenu=hotel"  data-reactid="83">
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_2.jpg" />
                        <h3 data-reactid="85">亞龍灣</h3>
                        <p className="summary" title="我國唯一具有熱帶風情的國家級旅遊度假區，終年可游泳，被譽爲/“天下第一灣/”。" >
                            我國唯一具有熱帶風情的國家級旅遊度假區，終年可游泳，被譽爲/“天下第一灣/”。
                        </p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d65650?fluxentrance=10410&amp;FromMenu=hotel"  >
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_4.jpg" />
                        <h3 data-reactid="89">海棠灣</h3>
                        <p className="summary" title="海棠灣內有/“神州第一泉/”南田溫泉、鐵爐港、伊斯蘭古墓羣、海棠秀、蜈支洲島等美景" >海棠灣內有/“神州第一泉/”南田溫泉、鐵爐港、伊斯蘭古墓羣、海棠秀、蜈支洲島等美景</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d3244?fluxentrance=10410&amp;FromMenu=hotel" >
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_1.jpg" />
                        <h3 data-reactid="93">蜈支洲島</h3>
                        <p className="summary" title="最美情人島，中國的馬爾代夫！" data-reactid="94">最美情人島，中國的馬爾代夫！</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d48963?fluxentrance=10410&amp;FromMenu=hotel" >
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_5.jpg" />
                        <h3 data-reactid="97">西島</h3>
                        <p className="summary" title="海南第二大島，潛水，摩托艇，空中拖傘，玻璃船海底觀光等各式活動應有盡有。">海南第二大島，潛水，摩托艇，空中拖傘，玻璃船海底觀光等各式活動應有盡有。</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/search?fluxentrance=10410&amp;keywords=%u4E03%u4ED9%u5CAD&amp;FromMenu=hotel"  data-reactid="99">
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_7.jpg" />
                        <h3 data-reactid="101">七仙嶺</h3>
                        <p className="summary" title="熱帶雨林，野溪溫泉融爲一體，擁抱大自然" data-reactid="102">熱帶雨林，野溪溫泉融爲一體，擁抱大自然</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d74247?fluxentrance=10410&amp;FromMenu=hotel"  data-reactid="103">
                        <img width="280" height="200" alt="" src="//images4.c-ctrip.com/target/hotel/75000/74159/6d56f53077c547038f0ee7827d347e73_300_225.jpg" data-reactid="104"/>
                        <h3 data-reactid="105">亞龍灣熱帶天堂森林公園</h3>
                        <p className="summary" title="各種熱帶雨林森林奇景！非誠勿擾2電影拍攝地！" data-reactid="106">各種熱帶雨林森林奇景！非誠勿擾2電影拍攝地！</p>
                    </a>
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d3231?fluxentrance=10410&amp;FromMenu=hotel" >
                        <img width="280" height="200" alt="" src="//images3.c-ctrip.com/dj/201501/gd/sy_6.jpg"/>
                        <h3>南田溫泉</h3 >
                        <p className="summary" title="天然椰林，巴厘島風情，神州第一泉！">天然椰林，巴厘島風情，神州第一泉！</p>
                    </a>
                </div>
            </div>

            <a href="javascript:;" className={LArrowClaName} onClick={() => this.handleclickPrev()} />
            <a href="javascript:;" className={RArrowClaName} onClick={() => this.handleclickNext()} />
        </div>
        )
    }
} 

源代碼：https://github.com/kellywang1314/react_kw， 歡迎指教