使用React创建轮播图（2）小按钮

---

前言

使用React创建轮播图（1）框架+自动跳转

---

一、目标功能

在前言(1)的基础上添加小按钮功能
1.关于左右切换小按钮：在原先自动切换的功能上(我使用的是将left的数据存入state数组中保存然后调用)，再加上向左切换的函数
2.关于指定页面小按钮：通过onClick事件修改对应数组的元素位置

二、实现方法

1.添加渲染内容

代码如下：
这里用onClick分别触发按钮的点击事件

render(){
   
        return(
            <div className="big" onMouseOut={
   this.out} onMouseOver={
   this.over}>

                <div className="mid" style={
   {
   left:this.state.picNo[this.state.No]}}>
                    <div className="pic1"> 1 </div>
                    <div className="pic2"> 2 </div>
                    <div className="pic3"> 3 </div>
                    <div className="pic4"> 4 </div>
                </div>
                <div className="spot_block">
                    <div className="spot" onClick={
   () => {
   this.setState({
   No: 3})}} > 4 </div>
                    <div className="spot" onClick={
   () => {
   this.setState({
   No: 2})}} > 3 </div>
                    <div className="spot" onClick={
   () => {
   this.setState({
   No: 1})}} > 2 </div>
                    <div className="spot" onClick={
   () => {
   this.setState({
   No: 0})}} > 1 </div>
                </div>
                <div className="shift_block">
                    <div className="left" onClick={
   this.tick_left}></div>
                    <div className="right" onClick={
   this.