php课程banner,如何利用react 实现banner轮播效果
最近在看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 (
{item.title + '==' + index + new Date().getTime()}
{item.date}
);
});
// 狀態點
let span = this.state.listClone.map((item, index) => {
index === this.state.current ? active = 'active' : active = '';
return (
onClick={this.toggleState.bind(this, item, index)}
key={index}
onMouseEnter={this.stateMouseenter.bind(this)}
onMouseLeave={this.stateMouseleave.bind(this)}
className={active}>
{index + 1}
);
});
return (
{span}
- {Li}
);
}
componentWillMount () {
// 頁面加載的數據
let list = [
{
date: '2018-02-12 12:54:52',
title: '● 今天深圳市天氣很好，很適合外出旅游1'
},
{
date: '2018-02-12 12:54:52',
title: '● 今天深圳市天氣很好，很適合外出旅游2'
},
{
date: '2018-02-12 12:54:52',
title: '● 今天深圳市天氣很好，很適合外出旅游3'
},
{
date: '2018-02-12 12:54:52',
title: '● 今天深圳市天氣很好，很適合外出旅游4'
},
{
date: '2018-02-12 12:54:52',
title: '● 今天深圳市天氣很好，很適合外出旅游5'
}
];
this.setState({
list: [...list],
listClone: [[...list], [...list], [...list], [...list], [...list]]
});
this.loop(3000);
}
componentDidMount () {
}
componentDidUpdate () {
}
componentWillUnmount () {}
};
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視頻教程請關注PHP中文網。
總結
以上是生活随笔為你收集整理的php课程banner,如何利用react 实现banner轮播效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Unity常用文件夹
- 下一篇： php 使用apache中的ab进行页