6 changed files with 281 additions and 3 deletions
@ -0,0 +1,98 @@ |
|||
li{ |
|||
list-style-type:none |
|||
} |
|||
|
|||
.wy-rightTop{ |
|||
.ant-select-selector, .ant-select-selection-placeholder{ |
|||
background-color:#011f59 !important; |
|||
border:#1E7BD6 1px solid !important; |
|||
font-family: PingFangSC-Regular, PingFang SC !important; |
|||
height: 25px !important; |
|||
// line-height: 25px !important; |
|||
}.ant-select-selection-item{ |
|||
line-height: 25px !important; |
|||
} |
|||
.anticon{ |
|||
color: #fff !important; |
|||
} |
|||
} |
|||
|
|||
|
|||
.contain { |
|||
position: relative; |
|||
top: 5%; |
|||
left: 45%; |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: all 30s; |
|||
transform: translateX(-50%); |
|||
color: #fff; |
|||
overflow: hidden; |
|||
cursor: pointer; |
|||
} |
|||
.contain .ul { |
|||
height: 100%; |
|||
list-style: none; |
|||
} |
|||
.contain .ul .items { |
|||
position: absolute; |
|||
top: 0px; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.ul li.show{ |
|||
display: block; |
|||
} |
|||
.ul li { |
|||
display: none; |
|||
} |
|||
.ul li img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.contain .dots { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 30px; |
|||
height: 10px; |
|||
transform: translateX(-50%); |
|||
} |
|||
.dots li { |
|||
float: left; |
|||
width: 10px; |
|||
height: 10px; |
|||
margin: 0px 5px; |
|||
border-radius: 50%; |
|||
transition: all .3s; |
|||
// background-color: antiquewhite; |
|||
list-style: none; |
|||
} |
|||
// .dots li.active { |
|||
// background-color: blue; |
|||
// } |
|||
.control .left { |
|||
position: absolute; |
|||
top: 80%; |
|||
left: 85%; |
|||
// padding: 5px; |
|||
// transform: translateY(-50%); |
|||
width: 20px; |
|||
height: 50px; |
|||
font-size: 20px; |
|||
cursor: pointer; |
|||
} |
|||
// .control .left:hover { |
|||
// background-color: #000000, |
|||
// } |
|||
.control .right { |
|||
position: absolute; |
|||
top: 80%; |
|||
right: 3%; |
|||
// padding: 5px; |
|||
// transform: translateY(-50%); |
|||
font-size: 20px; |
|||
cursor: pointer; |
|||
} |
|||
// .control .right:hover { |
|||
// background-color: rgba(0, 0, 0, .3); |
|||
// } |
|||
@ -0,0 +1,170 @@ |
|||
import { values } from 'lodash'; |
|||
import React, { Component } from 'react'; |
|||
import './conter.less'; |
|||
class ReactCarousel extends Component { |
|||
chunk(arr, size) { |
|||
var arr1 = new Array(); |
|||
for (var i = 0; i < Math.ceil(arr.length / size); i++) { |
|||
arr1[i] = new Array(); |
|||
} |
|||
var j = 0; |
|||
var x = 0; |
|||
for (var i = 0; i < arr.length; i++) { |
|||
if (!((i % size == 0) && (i != 0))) { |
|||
arr1[j][x] = arr[i]; |
|||
x++; |
|||
// console.log("j=" + j + " " + "x=" + x);
|
|||
} else { |
|||
j++; |
|||
x = 0; |
|||
// console.log("else:" + "j=" + j + " " + "x=" + x);
|
|||
arr1[j][x] = arr[i]; |
|||
// console.log(arr1);
|
|||
x++; |
|||
} |
|||
} |
|||
return arr1; |
|||
} |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.state = { |
|||
shuzu: [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }], |
|||
imgs: [], |
|||
showIndex: 0, //显示第几个图片
|
|||
timer: null, // 定时器
|
|||
show: false, // 前后按钮显示
|
|||
// arr1: ""
|
|||
} |
|||
// console.log(this.state.imgs);
|
|||
this.state.imgs = [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }] |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
render() { |
|||
return ( |
|||
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> |
|||
<div className="contain" |
|||
onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
|
|||
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
|
|||
> |
|||
<ul className="ul"> |
|||
{ |
|||
|
|||
this.state.imgs.map((value, index) => { |
|||
console.log(this.props); |
|||
return ( |
|||
<li style={{ position: "relative", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} |
|||
key={index} |
|||
> |
|||
{value.name ? <div style={{ width: "100%", height: "80%", backgroundColor: "#fff", position: "absolute", top: "10%", right: "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%" }} /> |
|||
{Math.ceil(Math.random() * 10)} |
|||
</div> |
|||
</div> |
|||
</div> : ""} |
|||
{/* <div>{value[1].name}</div> |
|||
<div>{value[2].name}</div> |
|||
<div>{value[3].name}</div> */} |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
</ul> |
|||
{/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}> |
|||
{ |
|||
this.state.imgs.map((value, index) => { |
|||
return ( |
|||
<li key={index} |
|||
className={index === this.state.showIndex ? 'active' : ''} |
|||
onClick={() => { this.change(index) }}> |
|||
</li>) |
|||
}) |
|||
} |
|||
|
|||
</ul> */} |
|||
{/* <div className="control" style={{ width: "100%", height: "10%" }}> |
|||
<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> |
|||
) |
|||
} |
|||
componentDidMount() { //一开始自动播放
|
|||
this.start(); |
|||
} |
|||
|
|||
componentWillUnmount() { //销毁前清除定时器
|
|||
this.stop(); |
|||
} |
|||
stop = () => { //暂停
|
|||
let { timer } = this.state; |
|||
clearInterval(timer); |
|||
} |
|||
start = () => { //开始
|
|||
let { timer } = this.state; |
|||
timer = setInterval(() => { |
|||
this.next(); |
|||
}, 3000); |
|||
this.setState({ |
|||
timer |
|||
}) |
|||
} |
|||
change = (index) => { //点击下面的按钮切换当前显示的图片
|
|||
let { showIndex } = this.state; |
|||
showIndex = index; |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
previous = (e) => { //上一张
|
|||
let ev = e || window.event; |
|||
let { showIndex, imgs } = this.state; |
|||
if (showIndex <= 0) { |
|||
showIndex = imgs.length - 1; |
|||
} else { |
|||
showIndex--; |
|||
} |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
next = (e) => { //下一张
|
|||
let ev = e || window.event; |
|||
let { showIndex, imgs } = this.state; |
|||
if (showIndex >= imgs.length - 1) { |
|||
showIndex = 0; |
|||
} else { |
|||
showIndex++; |
|||
} |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
} |
|||
export default ReactCarousel; |
|||
Loading…
Reference in new issue