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往前进