react如何实现banner轮播效果
这篇文章将为大家详细讲解有关react 如何实现banner轮播效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联从2013年创立,公司以成都网站建设、网站设计、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户数千家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。
最近在看react , jsx的语法一开始看起来确实不习惯,但是确实比较灵活
运行效果:
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}
- {Li}
css:
.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; }
关于react 如何实现banner轮播效果就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
标题名称:react如何实现banner轮播效果
新闻来源:http://scjbc.cn/article/jiccpo.html