mirror of https://gitee.com/cf-fz/WebCAD.git
parent
2d67f1786b
commit
806fe98887
@ -0,0 +1,110 @@
|
||||
import * as React from 'react';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
import { observable } from 'mobx';
|
||||
import { Classes } from '@blueprintjs/core';
|
||||
import { TopPanelStore } from '../Store/TopPanelStore';
|
||||
|
||||
export interface CarouselProps
|
||||
{
|
||||
store?: TopPanelStore;
|
||||
}
|
||||
|
||||
let banner = "http://t.qcad.cc/opzMainContent/fonts/2a81609f35de4df518a027bdf603d5f0.png";
|
||||
|
||||
/**
|
||||
* 轮播组件
|
||||
*/
|
||||
@inject('store')
|
||||
@observer
|
||||
export class Carousel extends React.Component<CarouselProps, any> {
|
||||
timeId = null;
|
||||
@observable position = [0, 100, 200];
|
||||
handleStart = () =>
|
||||
{
|
||||
this.handleClose();
|
||||
this.timeId = setInterval(() =>
|
||||
{
|
||||
let newPos = this.position.map(n =>
|
||||
{
|
||||
n -= 100;
|
||||
if (n < -100)
|
||||
n = 100;
|
||||
return n;
|
||||
})
|
||||
observable(this.position).replace(newPos);
|
||||
}, 3000);
|
||||
}
|
||||
handleClose = () =>
|
||||
{
|
||||
clearInterval(this.timeId);
|
||||
}
|
||||
handleClick = (i: number) =>
|
||||
{
|
||||
let currentPos = this.position[i];
|
||||
let newPos = this.position.map(n =>
|
||||
{
|
||||
n -= currentPos;
|
||||
if (n < -100)
|
||||
n = 100;
|
||||
return n;
|
||||
})
|
||||
observable(this.position).replace(newPos);
|
||||
}
|
||||
componentWillUnmount()
|
||||
{
|
||||
this.handleClose();
|
||||
}
|
||||
componentDidMount()
|
||||
{
|
||||
//先不打开轮播,有数据在继续
|
||||
// this.handleStart();
|
||||
}
|
||||
public render()
|
||||
{
|
||||
return (
|
||||
<div className="carousel">
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
left: this.position[0] + "%",
|
||||
transition: this.position[0] === 100 && "none"
|
||||
}}
|
||||
onMouseEnter={this.handleClose}
|
||||
onMouseLeave={this.handleStart}
|
||||
>
|
||||
<img src={banner} alt="" />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
left: this.position[1] + "%",
|
||||
transition: this.position[1] === 100 && "none"
|
||||
}}
|
||||
onMouseEnter={this.handleClose}
|
||||
onMouseLeave={this.handleStart}
|
||||
><img src={banner} alt="" /></div>
|
||||
<div style={{
|
||||
left: this.position[2] + "%",
|
||||
transition: this.position[2] === 100 && "none"
|
||||
}}
|
||||
onMouseEnter={this.handleClose}
|
||||
onMouseLeave={this.handleStart}
|
||||
><img src={banner} alt="" /></div>
|
||||
</div>
|
||||
<ul className={Classes.LIST_UNSTYLED}>
|
||||
<li
|
||||
className={this.position[0] === 0 && "active"}
|
||||
onClick={() => this.handleClick(0)}
|
||||
></li>
|
||||
<li
|
||||
className={this.position[1] === 0 && "active"}
|
||||
onClick={() => this.handleClick(1)}
|
||||
></li>
|
||||
<li
|
||||
className={this.position[2] === 0 && "active"}
|
||||
onClick={() => this.handleClick(2)}
|
||||
></li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in new issue