旋转木马详解:
- 定义组件:
- 引入组件
- 在components中放入组件
- 在components中模拟旋转木马数据
- 利用map方法在页面渲染数据获取数据
- 效果图如下
- 写鼠标移入事件
const οnmοuseenter=(id)=>{
for(let a=0;a<carouselBox.current.children.length;a++){
carouselBox.current.children[a].style['animation-play-state']=`paused`
}
let carouselData=data.find(item=>item.id===id)
carouselData.active=!carouselData.active
setData([...data])
}
- 写鼠标移出事件
const οnmοuseleave=(id)=>{
for(let a=0;a<carouselBox.current.children.length;a++){
carouselBox.current.children[a].style['animation-play-state']=`running`
}
let carouselData=data.find(item=>item.id===id)
carouselData.active=!carouselData.active
setData([...data])
}
- 写点击提示文字
const οnclick=(id)=>{
let carouselData=data.find(item=>item.id===id)
alert(carouselData.text)
}效果图如下
-
最终得出旋转木马动画效果(写完代码可自行查看)