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;