react中实现图片轮播

1.开始展示多张图片

效果图：点击左右按钮的时候可以滑动，当向左滑动完成之后，有按钮消失；当像右滑动完成之后左按钮消失。
这里写图片描述
解决方法：可以直接使用jquery的动画效果。。。（开始想使用原生js，各种报错。。。后边在想下）
具体操作：

首先react组件中的图片是循环输出的，每次点击一个城市，其相应的景点信息就会输出在它的下方，需要操作的内容如下：

 <div className="pro_list_wrap" style={{width:"10000px",position:'relative'}} data-curPageIndex='0' data-count='8' id='1'>
                    {
                      Scenics.map((item,key) => (
                            <a className='pro_list_recomm'
                               href={item.Url}
                               ref={key}
                               d='111'
                            >
                                <img 
                                    width="280"
                                    height="200"
                                    alt=''
                                    src={item.ProductImageUrl}
                                />
                                <h3>{item.ProductName}</h3>
                                <p className='summary' title={item.ProductDesc}>{item.ProductDesc}</p>
                            </a>
                        ))
                    }
                </div>

我们的思路是给包裹a标签的div设置style={{width:”10000px”,position:’relative’}，这样就可以只有4张能被看到，其余四站在右侧不会被看到，当点击右侧按钮时候，该div应该整体像左滑动，比如第一次点击右按钮，div向左滑动300px, 当你第二次点击右按钮，div整体向左滑动300*2，另外一边同样，所以可以通过动画控制div的滑动。
实现过程

首先在组件外设置函数

const getPage = (value) =>{   
    let count=parseInt($('#1').attr('data-count'))
    //初始显示图片数
    let viewcount=4
    let n=count-viewcount
    value > n || 0 > value ||  $('#1').animate({
        left: -300 * value+'px'
    })
     $('#1').attr('data-curPageIndex',value)
     $('.arrow_l').removeClass("hidden")
     $('.arrow_r').removeClass("hidden")
     0 == value && $('.arrow_l').addClass("hidden")
     value == n && $('.arrow_r').addClass("hidden")
}

const  next = () =>{
    let curPageIndex=parseInt($('#1').attr('data-curPageIndex'))
    getPage(curPageIndex+1)
}
const pre = () => {
    let curPageIndex=parseInt($('#1').attr('data-curPageIndex'))
    getPage(curPageIndex-1)

}

接着在组件内部调用next和pre函数，完美解决。。

      HandleclickPrev=() =>{
        pre()
      }

      HandleclickNext=() =>{
       next() 
      }
<a href="javascript:;" className="arrow_l" onClick={() => this.HandleclickPrev()}></a>

<a href="javascript:;" className="arrow_r" onClick={() => this. HandleclickNext()}></a>

后边尝试改成原生js和react

react中实现图片轮播

1.开始展示多张图片

猜你喜欢