react实现pc端图片轮播

最新推荐文章于 2024-09-09 08:14:20 发布

置顶

kellywong

最新推荐文章于 2024-09-09 08:14:20 发布

阅读量7.1k

点赞数 2

分类专栏： web前端 react transform

本文链接：https://blog.csdn.net/kellywong/article/details/81670811

版权

本文介绍了如何使用React来实现一个图片轮播功能。通过结合transform属性，设置合适的div结构和样式，实现了点击箭头平滑切换图片的效果。在达到图片列表边界时，自动隐藏相应箭头。完整代码已上传至GitHub，供参考和交流。

摘要由CSDN通过智能技术生成

1.需求描述
有多张图片和左右两个箭头，点击箭头可以平稳滑动，右侧滑动到最后一张图会隐藏右箭头，左侧同理
这里写图片描述
2 解决方案：使用react, 配合transform来实现移动

首先，给出div结构, 首屏展示几张图，需要设置最外层类宽度width和每一个item的宽度，来控制首屏显示几张图片

      //  dom结构
      <div id='parent'>
            <div className="bd basefix ">
                <div className="pro_list_wrap"  style={
  { width: width, transition: transition, transform: transform }} id="hot_scenics_list"  >
                    <a className="pro_list_recomm" href="http://taocan.ctrip.com/sh/sanya61/d51680?fluxentrance=10410&amp;FromMenu=hotel" >
                        <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" >
                        <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&