文件目录:
src-|
|-Sliders-|
|-components-|
| |-Sliders.js
| |-SlidersArrows.js
| |-SlidersDots.js
| |-SlidersItem.js
|-css-|
| |-Sliders.css
|
|-img-|
| |-图片
|
|-index.js
引用插件文件设置:
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Sliders from './components/Sliders';
const Img=[
require('./img/1.gif'),
require('./img/2.gif'),
require('./img/3.jpg'),
require('./img/4.jpg'),
]
ReactDOM.render(
<Sliders
images={Img}
speed={1}
delay={2}
autoPlay={true}
autoParse={true}
/>,document.querySelector('#root')
);
js:
1、 Sliders.js
import React,{Component} from 'react';
import '../css/Sliders.css';
import SlidersItem from './SlidersItem';
import SlidersArrows from './SlidersArrows';
import SlidersDots from './SlidersDots';
export default class Sliders extends Component{
constructor(){
super();
this.state={index:0}
}
componentDidMount(){
if(this.props.autoPlay){
this.go();
}
}
go=()=>{
this.timer=setInterval(()=>{
this.turn(1)
},this.props.delay*1000)
};
turn=(step)=>{
let index= this.state.index+step;
if(index>=this.props.images.length){
index=0;
}
if(index<0){
index=this.props.images.length-1;
}
this.setState({index:index})
};
render(){
return (
<div
className="wrapper"
onMouseOver={()=>clearInterval(this.timer)}
onMouseOut={this.go}
>
<SlidersItem
images={this.props.images}
speed={this.props.speed}
index={this.state.index}
/>
<SlidersArrows
turn={this.turn}
/>
<SlidersDots
images={this.props.images}
turn={this.turn}
index={this.state.index}
/>
</div>
)
}
};
2、 SlidersItem.js
import React,{Component} from 'react';
export default class SlidersItem extends Component{
render(){
let style={
width:this.props.images.length*500+'px',
left:this.props.index*-500+'px',
transitionDuration:this.props.speed+'s'
};
return (
<ul className="sliders" style={style}>
{
this.props.images.map((item,index)=>(
<li
className="slider"
key={index}
>
<img src={item} alt=""/>
</li>
))
}
</ul>
)
}
}
3、 SlidersArrows.js
import React,{Component} from 'react';
export default class SlidersArrows extends Component{
render(){
return (
<div
className="arrows"
>
<span
className="arrow arrow-left"
onClick={()=>this.props.turn(-1)}
>
<
</span>
<span
className="arrow arrow-right"
onClick={()=>this.props.turn(1)}
>
>
</span>
</div>
)
}
}
4、 SlidersDots.js
import React,{Component} from 'react';
export default class SlidersDots extends Component{
render(){
return (
<div
className="dots"
>
{
this.props.images.map((item,index)=>(
<span
key={index}
className={"dot "+(index==this.props.index?'active':'')}
onClick={()=>this.props.turn(index-this.props.index)}
>
</span>
))
}
</div>
)
}
}
css:
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
.wrapper{
position: relative;
width: 500px;
margin: 30px auto;
height: 300px;
overflow: hidden;
}
.sliders{
position: absolute;
height: 300px;
}
.slider{
float: left;
width: 500px;
height: 300px;
}
.slider img{
width: 100%;
height: 100%;
}
.arrows{
position: absolute;
top: 50%;
height: 20px;
width: 100%;
}
.arrow{
position: absolute;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #ccc;
cursor: pointer;
}
.arrow-left{
left: 10px;
}
.arrow-right{
right:10px;
}
.dots{
position: absolute;
bottom: 10px;
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
}
.dot{
display: inline-block;
width: 20px;
height: 20px;
margin: 0 3px;
background-color: #ccc;
}
.dot.active{
background-color: deepskyblue;
}