|
|
@ -61,20 +61,41 @@ class ReactCarousel extends Component { |
|
|
|
|
|
|
|
this.state.imgs.map((value, index) => { |
|
|
|
return ( |
|
|
|
<li style={{ position: "relative", left: "8%", width: "100%", height: "100%" }} className={index === this.state.showIndex ? 'show' : ''} |
|
|
|
<li style={{ position: "relative", left: "8%", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} |
|
|
|
key={index} |
|
|
|
> |
|
|
|
<div style={{ width: "40%", height: "40%", backgroundColor: "red", position: "absolute", left: "-3%", top: "3%" }}> |
|
|
|
<div style={{ width: "45%", height: "40%", backgroundColor: "red", position: "absolute", left: "-3%", top: "5%" }}> |
|
|
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|
|
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|
|
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|
|
|
{value[0]?.name} |
|
|
|
</div> |
|
|
|
{value[1]?.name ? <div style={{ width: "40%", height: "40%", backgroundColor: "#fff", position: "absolute", left: "45%", top: "3%" }}> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
{value[1]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "#fff", position: "absolute", left: "45%", top: "5%" }}> |
|
|
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|
|
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|
|
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|
|
|
{value[1]?.name} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> : ""} |
|
|
|
{value[2]?.name ? <div style={{ width: "40%", height: "40%", backgroundColor: "bule", position: "absolute", left: "-3%", top: "50%" }}> |
|
|
|
{value[2]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "bule", position: "absolute", left: "-3%", top: "49%" }}> |
|
|
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|
|
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|
|
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|
|
|
{value[2]?.name} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> : ""} |
|
|
|
{value[3]?.name ? <div style={{ width: "40%", height: "40%", backgroundColor: "pink", position: "absolute", left: "45%", top: "50%" }}> |
|
|
|
{value[3]?.name ? <div style={{ width: "45%", height: "40%", backgroundColor: "pink", position: "absolute", left: "45%", top: "49%" }}> |
|
|
|
<div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}> |
|
|
|
<div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}> |
|
|
|
<img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} /> |
|
|
|
{value[3]?.name} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> : ""} |
|
|
|
{/* <div>{value[1].name}</div> |
|
|
|
<div>{value[2].name}</div> |
|
|
@ -97,8 +118,12 @@ class ReactCarousel extends Component { |
|
|
|
|
|
|
|
</ul> */} |
|
|
|
<div className="control" style={{ width: "100%", height: "10%" }}> |
|
|
|
<span className="left" onClick={(e) => { this.previous(e) }}>左</span> |
|
|
|
<span className="right" onClick={(e) => { this.next(e) }}>右</span> |
|
|
|
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%" }} className="left" onClick={(e) => { this.previous(e) }}> |
|
|
|
<img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} /> |
|
|
|
</span> |
|
|
|
<span style={{ position: "absolute", top: "86%", width: "3%", height: "8%", right: "6%" }} className="right" onClick={(e) => { this.next(e) }}> |
|
|
|
<img src='/assets/images/leadership/youofanye.png' style={{ width: "100%", height: "100%" }} /> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -119,7 +144,7 @@ class ReactCarousel extends Component { |
|
|
|
let { timer } = this.state; |
|
|
|
timer = setInterval(() => { |
|
|
|
this.next(); |
|
|
|
}, 300000); |
|
|
|
}, 2000); |
|
|
|
this.setState({ |
|
|
|
timer |
|
|
|
}) |
|
|
|