mirror of https://gitee.com/cf-fz/WebCAD.git
ChenX
6 years ago
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