wangyue
2 years ago
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