react实现pc端图片轮播

1.需求
有多张图片和左右两个箭头，点击箭头可以平稳滑动，右侧滑动到最后一张图会隐藏右箭头，左侧同理

2 解决方案：使用react, 配合transform来实现移动

1. 首先，给出div结构, 首屏展示几张图，需要最外层类bd设置的宽度width和每一个a设置的宽度，来控制，需要自己控制。

//dom结构
         

            

                

                    
                         
                        
三亚湾
                        
湾长沙细，岸上绿树如带，是南国海滨最美的/“椰梦长廊/”
                    
                    
                    
                        
                        
亚龙湾
                        

                            我国唯一具有热带风情的国家级旅游度假区，终年可游泳，被誉为/“天下第一湾/”。
                        
                    
                    
                        
                        
海棠湾
                        
海棠湾内有/“神州第一泉/”南田温泉、铁炉港、伊斯兰古墓群、海棠秀、蜈支洲岛等美景
                    
                    
                        
                        
蜈支洲岛
                        
最美情人岛，中国的马尔代夫！
                    
                    
                        
                        
西岛
                        
海南第二大岛，潜水，摩托艇，空中拖伞，玻璃船海底观光等各式活动应有尽有。
                    
                    
                        
                        
七仙岭
                        
热带雨林，野溪温泉融为一体，拥抱大自然
                    
                    
                        
                        
亚龙湾热带天堂森林公园
                        
各种热带雨林森林奇景！非诚勿扰2电影拍摄地！
                    
                    
                        
                        
南田温泉
                        
天然椰林，巴厘岛风情，神州第一泉！
                    
                
            

             this.handleclickPrev()} />
             this.handleclickNext()} />
        

//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 (
        

            

                

                    
                         
                        
三亚湾
                        
湾长沙细，岸上绿树如带，是南国海滨最美的/“椰梦长廊/”
                    
                    
                    
                        
                        
亚龙湾
                        

                            我国唯一具有热带风情的国家级旅游度假区，终年可游泳，被誉为/“天下第一湾/”。
                        
                    
                    
                        
                        
海棠湾
                        
海棠湾内有/“神州第一泉/”南田温泉、铁炉港、伊斯兰古墓群、海棠秀、蜈支洲岛等美景
                    
                    
                        
                        
蜈支洲岛
                        
最美情人岛，中国的马尔代夫！
                    
                    
                        
                        
西岛
                        
海南第二大岛，潜水，摩托艇，空中拖伞，玻璃船海底观光等各式活动应有尽有。
                    
                    
                        
                        
七仙岭
                        
热带雨林，野溪温泉融为一体，拥抱大自然
                    
                    
                        
                        
亚龙湾热带天堂森林公园
                        
各种热带雨林森林奇景！非诚勿扰2电影拍摄地！
                    
                    
                        
                        
南田温泉
                        
天然椰林，巴厘岛风情，神州第一泉！
                    
                
            

             this.handleclickPrev()} />
             this.handleclickNext()} />
        

        )
    }
} 

源代码：https://github.com/kellywang1314/react_kw， 欢迎指教