4.图片切换[demo]

这篇博客是对前面学过的知识的一个总结和运用。

一、需求

1. 让图片每隔两秒钟切换一次。
2. 鼠标悬浮，图片停止切换。

#root {
    width: 520px;
    height: 280px;
    border: 2px solid;
    margin: 0 auto;
}

#root img {
    width: 100%;
    height: 100%;
    display: block;
}

// react无侵入性 所以我们可以用原生js的方式注册事件
import React from 'react';
import ReactDOM from 'react-dom';
import src1 from './assets/1.jpg';
import src2 from './assets/2.jpg';
import src3 from './assets/3.jpg';
import './index.css';

let srcs = [src1,src2,src3];
let index=0;
let container = document.getElementById('root');
let timer = null;

// render函数：将图片渲染到页面上
function render(){
    ReactDOM.render(<img src = {srcs[index]} alt='此处是轮播图片'/>,container);
}

// change函数：切换图片
function change(){
    stop();
    timer = setInterval(()=>{
        index = (index+1)%3;
        render();
    },2000);
}

// stop函数：停止轮播图
function stop(){
    clearInterval(timer);
}

//用js注册事件
container.onmouseenter = function(){
    // 鼠标移入，停止切换
    stop();
}
container.onmouseleave = function(){
    // 鼠标移出，继续切换
    change();
}
//初始时渲染第一张图片（src1）
render();
change();

二、效果

三、总结

1. JSX对象的属性是不可变的，但是我们仍然想要修改JSX中<img/>标签的src属性，我们怎么做？前面讲到过，这种情况我们只能用定时器或循环不断创建新的JSX对象并重新渲染。
2. 由于目前还没学React注册事件的方式，所有此处用了js中注册事件的方法。前面同样讲过，React是一个库，不是框架，React没有侵入性。