React-banner轮播

与传统的轮播概念一样

分成三个部分

能够左右点击的navigator

底部随着画面改动

而active的dot

最后就是slideshow

首先第一步得先做一个容器

并把所有图片排列成一长条

每一张图片变动

概念都是以整个画面的left:n*-100%再做滑动

/* width: 500%; */height: auto;overflow: hidden;display: flex;justify-content: start;position: relative;left: 0;transition: 0.5s all ease-in-out;

为了能够未来增加图片数量(这边预设为5张，注:此处的active为slideIndex的意思)

此处的width在react内控制

const loop={left:(active-1)*(-100)+'%',width:picData.map(f=>f.id).length*100+'%'};

图片排列结束后

在ui上印出图片

<div className={style.slideshowSlidesWrap} style={loop}>    {picData.map(pd=>(        <a href={pd.link2} className={style.slide} target="_blank" key={pd.id}><img src={pd.link1} alt={pd.alt}/></a>    ))}</div>

接着準备左右点击的navigator

此处準备一个handleClick事件于navigator上

并取消点击连结事件

const handlePrev=(e)=>{    e.preventDefault();    active>=2 ?setActive(c=>c-1):setActive(picData.map(f=>f.id).length);};const handleNext=(e)=>{    e.preventDefault();    active<=picData.map(f=>f.id).length-1? setActive(c=>c+1):setActive(1);        };

在此处首先是定义useState(active)作为slidepic的index

预设起始值为1，useState(1)

并随着点击前进或是后退而+1、-1

到了第五张无法前进时

再点击，会回到第一张

第一张无法后退时

再点击，会变到第五张

此处考虑到未来添加图片的不确定性

图片的连结是用JSON档来描述

于是使用picData.map(f=>f.id)来计算出

加入图片连结的数量来定义总图片数

接下来定义图片下方的dot

这边必须在dot的container中

加入判断式

{picData.map((dot)=>(    dot.id = = active?<div className={`${style.dot} ${style.active}`} key={dot.id} onClick={()=>{handlePic(dot.id)}}></div> :                       <div className={style.dot} key={dot.id} onClick={()=>{handlePic(ki.id)}}></div>))}

这边的解释是

loop出pic的数量并计算出相对应的dot数(id:1~5与useState(active)相对应)

若dot的id等于useState(active)

class会加入active这个class使dot变色

其他不相等于useState(active)的class

则会维持原本的颜色

每个dot也会加入相对应id的handleClick事件

点击dot会使图片跳至相对应id的图片

const handlePic=(id)=>{    setActive(id);};

最后若是想加入秒数轮播的话

这边使用setInterval加入在useEffct内

useEffect(()=>{    let loop=setInterval(()=>{        active<=picData.map(f=>f.id).length-1?setActive(active+1):setActive(1);        },3000);    return ()=>clearInterval(loop);},[active]);

此处须注意两点

必须做一个return unmount的动作

否则此处active会一直叠加上去

最后轮播会卡住

另外在dependencies需加入active

侦测active改变时

画面再重新render

若没有加入active

此处画面不会改变

最后setInterval内放入一个三元判断式

若这个active小于或等于loop出来的id数量

active会继续+1往前进

若是大于loop的数量

则active回到1