react-图片切换练习

注意点: react中图片引用不能直接写入src属性,需要先导入

import React from 'react';
import ReactDOM from 'react-dom/client';

import img0 from './assets/0.jpeg'
import img1 from './assets/1.jpeg'
import img2 from './assets/2.jpeg'
import img3 from './assets/3.jpeg'
import img4 from './assets/4.jpeg'
import img5 from './assets/5.jpeg'
import img6 from './assets/6.jpeg'
import img7 from './assets/7.jpeg'
import img8 from './assets/8.jpeg'

const imgArr = [img0, img1, img2, img3, img4, img5, img6, img7, img8]
let index = 0
let timer;

const container = document.getElementById('root')

const root = ReactDOM.createRoot(container);

function redner() {
  const img = (
      <img src={imgArr[index]} alt="" />
  )
  root.render(
    <React.StrictMode>
      {img}
    </React.StrictMode>
  );
}

function start() {
  stop()
  timer = setInterval(()=> {
    index = (index + 1) % 8
    redner()
  }, 2000)
}

function stop() {
  clearInterval(timer)
}

container.onmouseenter = function () {
  stop()
}

container.onmouseleave = function () {
  start()
}

redner()

start()