Home>Article>Web Front-end> How to use react to achieve banner carousel effect
I’ve been looking at react recently. The syntax of jsx seems really unfamiliar at first, but it is indeed more flexible.
Running effect:
##
import React from 'react'; // import ShadowDOM from 'react-shadow'; import './index.css'; let timeId = null; // 循环定时的状态 export default class Index extends React.Component { constructor () { super(); this.state = { timeId: null, list: [], listClone: [], current: 0 }; } // 删除列表项目 deleItem (title, date, index) { let data = [...this.state.list]; data.splice(index, 1); this.setState({ list: data }); alert('删除成功!'); } // 点击状态点切换状态 toggleState (item, index) { let data = this.state.listClone; this.setState({ list: data[index], current: index }); } // 鼠标移入状态点 stateMouseenter () { clearInterval(timeId); } // 鼠标移出状态点 stateMouseleave () { this.loop(3000); } // 轮播事件 loop (speed) { timeId = setInterval(() => { let index = this.state.current; let data = this.state.listClone; if (index < this.state.list.length - 1) { index ++; this.setState({ list: data[index], current: index }); } else { index = 0; this.setState({ list: data[index], current: index }); } }, speed); } render () { let data = this.state.list; let active = ''; // 数据列表 let Li = data.map((item, index) => { return (
{span}
.list-item { width: 600px; padding: 10px; margin: 40px auto; background: #ccc; border: 1px solid #eee; } .list-item li { margin: 10px 0; font-size: 14px; color: #333; text-align: left; } .list-item li span:nth-child(2) { float: right; } .item-state { text-align: right; } .item-state span { display: inline-block; height: 20px; width: 20px; color: #333; line-height: 20px; text-align: center; background: #eee; border-radius: 20px; margin-left: 5px; cursor: pointer; } .item-state span.active { background: red; }The above is a complete introduction to how to use react to achieve the banner carousel effect. I hope you can gain something. For more
React video tutorials, please pay attention to the PHP Chinese website.
The above is the detailed content of How to use react to achieve banner carousel effect. For more information, please follow other related articles on the PHP Chinese website!