使用React创建轮播图（4）实时跟踪

---

前言

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

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

使用React创建轮播图（3）拖拽+优化代码

---

一、目标功能

实现跟踪小按钮，通过每一次切换页面，底部的小按钮会显示当前页面的位置

二、优化内容

1）优化代码，将一些重复的同类样式，通过js的方法创建相同节点
2）使用import引入图片，图片位于相同的路径下

三、实现方法

通过两个函数renderDot(),creatPic(),通过js创建相同类型的节点

//4.0实时小按钮功能
    renderDot() {
   
        let dots = [];
        for (let i = 0; i < pageNumber; i++) {
   
            dots.push(<div className="spot" onClick={
   () => {
   this.spot(i)}} >
                {
   
                    i === this.state.No ? "●" : "○"
                }
            </div>);
        }
        return dots;
    }

    
    creatPic(){
   
        let pics=[];
        let pic=[pic1,pic2,pic3,pic4];
        for(let i=0;i<pageNumber;i++){
   
            pics.push(<div className="pic" style={
   {
   width: Math.abs(width),height: height}}>
                <img src={
   pic[i]} alt={
   "none"} className="img" draggable="false">
                </img>
            </div>);
        }
        return pics;
    }

开头的import以及全局常量设置，图像在与js文件同位置

import React from 'react';
import './autopic2.css';
import pic1 from "./1.jpg";
import pic2 from "./2.jpg";
import pic3 from "./3.jpg";
import pic4 from "./4.jpg";

const width=-1000;
const height=250;
const pageNumber = 4;

四、完整代码

css完整代码

.big{
   
    overflow: hidden;
    position: relative;
}

.mid{
   
    position: absolute;
    transition: 1s;
}

.pic{
   
    float: left;
    background-color: violet;
}

.img{
   
    padding: 0;
    margin