|
@ -2,7 +2,7 @@ import { values } from 'lodash'; |
|
|
import React, { Component } from 'react'; |
|
|
import React, { Component } from 'react'; |
|
|
import './conter.less'; |
|
|
import './conter.less'; |
|
|
class ReactCarousel extends Component { |
|
|
class ReactCarousel extends Component { |
|
|
chunk(arr, size) { |
|
|
chunk (arr, size) { |
|
|
var arr1 = new Array(); |
|
|
var arr1 = new Array(); |
|
|
for (var i = 0; i < Math.ceil(arr.length / size); i++) { |
|
|
for (var i = 0; i < Math.ceil(arr.length / size); i++) { |
|
|
arr1[i] = new Array(); |
|
|
arr1[i] = new Array(); |
|
@ -45,7 +45,7 @@ class ReactCarousel extends Component { |
|
|
// arr1: ""
|
|
|
// arr1: ""
|
|
|
dizhi: localStorage.getItem("qndmn") |
|
|
dizhi: localStorage.getItem("qndmn") |
|
|
} |
|
|
} |
|
|
// console.log(this.state.imgs);
|
|
|
console.log(this.props.shuzu); |
|
|
this.state.imgs = this.props.shuzu.filter((item) => { |
|
|
this.state.imgs = this.props.shuzu.filter((item) => { |
|
|
return item.imgs !== "" |
|
|
return item.imgs !== "" |
|
|
}) |
|
|
}) |
|
@ -53,7 +53,7 @@ class ReactCarousel extends Component { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
render () { |
|
|
return ( |
|
|
return ( |
|
|
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> |
|
|
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> |
|
|
<div className="contain" |
|
|
<div className="contain" |
|
@ -61,15 +61,27 @@ class ReactCarousel extends Component { |
|
|
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
|
|
|
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
|
|
|
|
|
|
|
|
|
> |
|
|
> |
|
|
<ul className="ul"> |
|
|
<ul className="ul" style={{ paddingInlineStart: 0 }}> |
|
|
{ |
|
|
{ |
|
|
this.state.imgs.map((value, index) => { |
|
|
this.state.imgs.map((value, index) => { |
|
|
return ( |
|
|
return ( |
|
|
<li style={{ position: "relative", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} |
|
|
<li style={{ |
|
|
|
|
|
// position: "relative",
|
|
|
|
|
|
width: "100%", height: "100%", |
|
|
|
|
|
// top: "-5%",
|
|
|
|
|
|
fontSize: "12px" |
|
|
|
|
|
}} className={index === this.state.showIndex ? 'show' : ''} |
|
|
key={index} |
|
|
key={index} |
|
|
> |
|
|
> |
|
|
<div style={{ width: "100%", height: "80%", position: "absolute", top: "10%", right: "5%" }}> |
|
|
<div style={{ |
|
|
<img src={this.state.dizhi + "/" + value.imgs} style={{ width: "100%", height: "100%", marginLeft: "3%", marginRight: "3%" }} /> |
|
|
width: "100%", height: "80%", |
|
|
|
|
|
// position: "absolute", top: "10%", right: "5%"
|
|
|
|
|
|
}}> |
|
|
|
|
|
<img src={this.state.dizhi + "/" + value.imgs} style={{ |
|
|
|
|
|
// width: "100%", height: "100%",
|
|
|
|
|
|
width: 140, height: 140, |
|
|
|
|
|
marginLeft: "3%", marginRight: "3%" |
|
|
|
|
|
}} /> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
</li> |
|
|
|
|
|
|
|
@ -101,11 +113,11 @@ class ReactCarousel extends Component { |
|
|
</div > |
|
|
</div > |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
componentDidMount() { //一开始自动播放
|
|
|
componentDidMount () { //一开始自动播放
|
|
|
this.start(); |
|
|
this.start(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
componentWillUnmount() { //销毁前清除定时器
|
|
|
componentWillUnmount () { //销毁前清除定时器
|
|
|
this.stop(); |
|
|
this.stop(); |
|
|
} |
|
|
} |
|
|
stop = () => { //暂停
|
|
|
stop = () => { //暂停
|
|
|