import React,{Component,PropTypes} from 'react'; import {circleFunction} from '../main';//绑定this import {method} from '../common';//通用方法集合 import BannerType from './ButtonType';//左右按钮组件 import Pagination from './Pagination'; class Banner extends Component{ static PropTypes={ menuData:PropTypes.Array, autoPlay:PropTypes.Bool }; constructor(props){ super(props); circleFunction(this,[ 'autoPlay','onClickLeft','onClickRight','onTouchStart','onTouchMove','onTouchEnd', 'onMouseDown','onMouseMove','onMouseUp','bind_event' ]); this.state={ index:0, indexAfter:null, aniTime:0.5, }; this.isRun = false; this.isMouseEnter = false; this.timer =null; this.px = 0; this.MoveX = 0; this.startMove = 0; }; componentDidMount(){ //install width for li const liWid = this.refs.bannerHorizontal.offsetWidth; this.setState({liWidth:liWid}) } componentWillReceiveProps(nextProps){ if('menuData' in nextProps&&this.props.menuData !== nextProps.menuData){ const data1 = method.clone(nextProps.menuData); const data = nextProps.menuData; data.unshift(data[data.length-1]); data.push(data[1]); this.setState({menuData:data,menuData1:data1},()=>{ if('autoPlay' in nextProps&&nextProps.autoPlay){ this.autoPlay(); } }); } } /* * 自动轮播功能 * @param menuData 包裹图片的数组 * @param index 图片的索引 * @param isRun 是否开启点击事件 * @param callback 回掉暴露index索引 * */ autoPlay(){ const {index,menuData}= this.state; const a = new Promise(resolve=>{ if(index>-(menuData.length-2)){ this.setState({index:index-1,aniTime:'0.5'}) }else if(index === - (menuData.length-2)) { this.setState({index:0,aniTime:'none'},()=>{ setTimeout(()=>{ this.setState({index:-1,aniTime:'0.5'}) },10); }) } resolve(index); clearTimeout(this.timer); this.timer = setTimeout(() => { if(this.timer) { this.autoPlay() } }, 2000) }).then(index=>{ const {callback} = this.props; if('callback' in this.props){ index === -4 ? callback(0):callback(Math.abs(-index)); } }); }; //卸载 componentWillUnmount(){ clearTimeout(this.timer); } /* * 左边按钮功能 * @param menuData 包裹图片的数组 * @param index 图片的索引 * @param isRun 是否开启点击事件 * @param callback 回掉暴露index索引 * */ onClickRight(){ const {menuData,index}= this.state; clearTimeout(this.timer); if(!this.isRun){ this.isRun = true; if(index>-(menuData.length-2)){ this.setState({index:index-1,aniTime:'0.5'}) }else if(index === - (menuData.length-2)) { this.setState({index:0,aniTime:'none'},()=>{ setTimeout(()=>{this.setState({index:-1,aniTime:'0.5'})},10); }) } const {callback} = this.props; if('callback' in this.props){ index === -4 ? callback(0):callback(Math.abs(-index)); } setTimeout(()=>this.isRun = false,500) } } /* * 右边按钮功能 * @param menuData 包裹图片的数组 * @param index 图片的索引 * @param isRun 是否开启点击事件 * @param callback 回掉暴露index索引 * */ onClickLeft(){ const {menuData,index}= this.state; clearTimeout(this.timer); if(!this.isRun){ this.isRun = true; if(index ===-1){ this.setState({index:(-(menuData.length-1)),aniTime:'none'},()=>{ setTimeout(()=>{this.setState({index:-(menuData.length-2),aniTime:'0.5'})},10); }) }else { this.setState({index:index+1,aniTime:'0.5'}) } const {callback} = this.props; if('callback' in this.props){ index === -1 ? callback(menuData.length-3):callback(Math.abs(index+2)); } setTimeout(()=>this.isRun = false,500) } } //Pagination callbackPag=(data)=>{ clearTimeout(this.timer); const {callback} = this.props; if('callback' in this.props){ callback(Math.abs(data)); } this.setState({index:-(data+1)}) }; //map img · mapList=(data)=>{ const {liWidth} = this.state; return data.map((item,i)=>{ return 
}); }; onTouchStart=(e)=>{
e.preventDefault(); clearTimeout(this.timer); this.px = e.nativeEvent.changedTouches[0].pageX; }; onTouchMove=(e)=>{
e.preventDefault(); clearTimeout(this.timer); if(!this.isRun){
this.MoveX = e.nativeEvent.changedTouches[0].pageX - this.px; this.refs.ul.style = `-webkit-transform:translateX(${this.state.liWidth*this.state.index+this.MoveX}px)` } }; onTouchEnd(e){
e.preventDefault(); this.bind_event(); }; onMouseDown(e){
e.preventDefault(); clearTimeout(this.timer); this.px = e.nativeEvent.clientX; this.isMouseEnter = true; }; onMouseMove(e){
e.preventDefault(); //clearTimeout(this.timer); if(this.isMouseEnter){
this.MoveX = e.nativeEvent.clientX - this.px; this.refs.ul.style = `-webkit-transform:translateX(${this.state.liWidth*this.state.index+this.MoveX}px)` } }; onMouseUp(e){
e.preventDefault(); this.isMouseEnter = false; this.bind_event(); }; /* * 绑定移动事件功能 * @param menuData 包裹图片的数组 * @param index 图片的索引 * @param callback 回掉暴露index索引 * */ bind_event(){
const {menuData,index}= this.state; const {callback} = this.props; this.refs.ul.style =`transition:0.5s`; if(this.MoveX<0&&this.MoveX>-100||this.MoveX>0&&this.MoveX<100){
this.refs.ul.style = `-webkit-transform:translateX(${this.state.liWidth*this.state.index}px)` }else{
if(this.MoveX<-100){
if(index === - (menuData.length-2)) {
this.setState({index:- (menuData.length-1),aniTime:'0.5'},()=>{
setTimeout(()=>{
this.setState({index:-1,aniTime:'none'}) },450); }) }else{
this.setState({index:index-1,aniTime:'0.5'}) } if('callback' in this.props){
callback(Math.abs(index)); } }else if(this.MoveX>100){
if(index ===-1){
this.setState({index:0,aniTime:'0.5'},()=>{
setTimeout(()=>{
this.setState({index:-(menuData.length-2),aniTime:'none'}) },450); }) }else {
this.setState({index:index+1,aniTime:'0.5'}) } if('callback' in this.props){
index === -1 ? callback(menuData.length-3):callback(Math.abs(index+2)); } } } } render(){
const {index,menuData,liWidth,aniTime,menuData1}=this.state; const {showButton,showPagination} = this.props; const ani = {
WebkitTransform:`translateX(${liWidth*index}px)`, transition:`${aniTime}s`, }; return (
{!!menuData&&this.mapList(menuData)}
{this.props.children} {showButton&&
} {showPagination&&
}
) } } export default Banner; //按钮组件
class BannerType extends Component{ constructor(props){ super(props); circleFunction(this,['onClickLeft','onClickRight']); }; // onClickLeft(){ this.props.onClickLeft(); } onClickRight(){ this.props.onClickRight(); } render(){ return ( ) } } export default BannerType; //type 组件 class Pagination extends Component{ static PropTypes={ index:PropTypes.number }; constructor(props){ super(props); circleFunction(this,['callbackPag']); }; componentWillReceiveProps(nextProps){ if('index' in nextProps){ this.setState({index:nextProps.index}) } } //call callbackPag(i){ this.props.callbackPag(i) } mapLiToUl=(data)=>{ let {index} = this.state; if(index ===-1){ index = data.length -1; }else if(index ===data.length){ index = 0; } return data.map((item,i)=>{ if(index === i){ return this.callbackPag(i)} className="active_p" key={i}> } return
this.callbackPag(i)} key={i}> }); }; render(){
const {data} = this.props; return (
{!!data&&data.length>0&&this.mapLiToUl(data)}
) } } export default Pagination;