四时宝库

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    imgPath: 'src/chapterOne/Assets/',
    imgEx: '.jpg',
    file1Name: 'car1-1',
    file2Name: 'car2-2',
    file3Name: 'car3-3',
    file4Name: 'car4-4',
    alertInfo: '加载图像',
}

/**
 * 图像onLoad事件处理函数
 */
function loadPic(){
    alert(infoMap.alertInfo);
}

class Img extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listImg: [
                'src/chapterOne/Assets/car1-1.jpg',
                'src/chapterOne/Assets/car2-2.jpg',
                'src/chapterOne/Assets/car3-3.jpg',
                'src/chapterOne/Assets/car4-4.jpg',
            ],
            index: 0
        }
    }

    // 计时器执行
    indexChange(){
        if (this.state.index == this.state.listImg.length-1){
            this.setState({
                index: 0
            })
        } else {
            this.setState({
                index: this.state.index + 1
            })
            // 在浏览器Console中输出图片序号
            console.log(this.state.index);
        }
    }

    componentDidMount() {
        setInterval(() => {
            this.indexChange();
        }, 2000);
    }

    render() { 
        let {listImg, index} = this.state;
        let imgList = listImg.map((item, imgIndex) => {
            return <img src={item} key={imgIndex} style={{'display':index == imgIndex ? 'block' : 'none'}} className="img" onLoad={loadPic} />
        });
        let liList = listImg.map((item2, imgIndex2) => {
            return <li key={imgIndex2} style={{'listStyleType':index == imgIndex2?'initial':'circle'}}></li>
        });
        return (
            <div>
                {imgList}
                <div>
                    <ul>
                        {liList}
                    </ul>
                </div>
            </div>
        );
    }
}

const ImageEventExample = () => {
    return (
        <span>
            <Img />
        </span>
    );
}

export default ImageEventExample;

运行效果：