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， 欢迎指教