react无缝滚动轮播图

首先：父组件Slider，三个子组件：SliderList、SliderArrows、SliderDots

目录

index.js

import React,{Component} from 'react';
import ReactDOM,{render} from 'react-dom';
import Slider from "./Slider";
import './index.less'

import a from './1.jpg';
import b from './2.jpg';
import c from './3.jpg';
let items = [{src:a},{src:b},{src:c}];

ReactDOM.render(<Slider
    delay={2}
    speed={0.5}
    autoplay={true}
    dots={true}
    arrows={true}
    items={items}
/>,window.root);

复制代码

index.less

*{margin: 0;padding: 0}
ul,li{list-style: none}
.slider-container{
  width:400px;
  height:300px;
  border:5px solid red;
  margin:0 auto;
  position: relative;
  overflow: hidden;
  ul{
    position: absolute;height: 300px;left: 0;top: 0;
    li{
      width: 400px;height: 300px;float: left;
      img{width: 100%;height: 100%;}
    }
  }
  .slider-arrows{
    position: absolute;
    width: 100%;
    height:40px;
    top:50%;
    transform: translateY(-50%);
    left:0;
    span{
      width: 30px;height: 40px;line-height: 40px;display: block;
      background: #ffffff;text-align: center;-webkit-user-select: none;
      cursor: pointer;
      &:nth-child(1){
        float: left;
      }
      &:nth-child(2){
        float: right;
      }
    }
  }
  .slider-dots{
    position: absolute;width: 100%;left: 0;bottom: 20px;text-align: center;
    span{
      background: #ffffff;display: inline-block;width: 20px;height: 20px;
      border-radius: 50%;margin: 3px;cursor: pointer;
      &.active{
        background: rgba(233,222,100,0.8);
      }
    }
  }
}
复制代码

Slider.js

import React,{Component} from 'react';
import SliderList from "./SliderList";
import SliderArrows from "./SliderArrows";
import SliderDots from "./SliderDots";
export default class Slider extends React.Component {
    constructor(){
        super();
        this.state = {index:0}// 表示当前是第几张
    }
    go =(step)=>{ // 去哪  传入要动几个
        let index = this.state.index+step;// 先加的
        if(index > this.props.items.length){ // 当等于最后一张时  越界回到0
            this.$ul.style.transitionDuration = '';// 清除ul上的动画
            this.$ul.style.left = 0;// 回到0处
            setTimeout(()=>{// 等动画移除后并且回到了0点  再增加回动画时间（dom刷新一般是30s）
                this.$ul.style.transitionDuration = this.props.speed+'s';// 再增加回来这个动画
                index = 1;// 下一次该走1了
                this.setState({index});
            },30)
            return;//因为设置了setTimeout所以要等待setTimeout后再设置最新状态
        }
        if(index < 0){// 当小于第一张时  回到最后一张
            this.$ul.style.transitionDuration = '';// 清除ul上的动画
            this.$ul.style.left = this.props.items.length*-1*400+'px';
            setTimeout(()=>{
                this.$ul.style.transitionDuration = this.props.speed+'s';
                index = this.props.items.length -1;
                this.setState({index});
            },30);
            return
        }
        this.setState({
            index:index
        })
    }
    turn = () =>{ // 轮播
        this.timer = setInterval(()=>{
            this.go(1)
        },this.props.delay*1000);
    }
    componentDidMount(){ // 页面加载完成后  看是否需要自动轮播
        if(this.props.autoplay){
          this.turn();
        }
        // 通过ulfs获取sliderList中的ul元素(操作dom节点)
        console.log(this.$ul = this.refs.list.refs.ul)
    }
    render(){
        // 越界了并且只是第一个span加上active属性
        return (
            <div className='slider-container' onMouseEnter={()=>{
                clearInterval(this.timer);
            }} onMouseLeave={()=>{
                this.turn();
            }}>
                <SliderList ref='list' index={this.state.index} items={this.props.items} speed={this.props.speed}/>
                {this.props.arrows?<SliderArrows go={this.go}/>:null}
                {this.props.dots?<SliderDots go={this.go} items={this.props.items} index={this.state.index}/>:null}
            </div>
        )
    }
}
复制代码

SliderArrows.js

import React,{Component} from 'react';
export default class SliderDots extends React.Component {
    render(){
        return (
            <div className='slider-dots'>
                {this.props.items.map((item,index)=>(
                   <span key={index} className={this.props.index===index?'active':''}
                         onClick={()=>{this.props.go(index-this.props.index)}}></span>
                ))}
            </div>
        )
    }
}
复制代码

SliderDots.js

import React,{Component} from 'react';
export default class SliderDots extends React.Component {
    render(){
        // 越界了并且只是第一个span加上active属性
        return (
            <div className='slider-dots'>
                {this.props.items.map((item,index)=>(
                   <span key={index}
                         className={(this.props.index===index)||(this.props.index===this.props.items.length&&index===0)?'active':''}
                         onClick={()=>{this.props.go(index-this.props.index)}}></span>
                ))}
            </div>
        )
    }
}
复制代码

SliderList.js

import React,{Component} from 'react';
export default class MessageBox extends React.Component {
    render(){
        let style={
            width:(this.props.items.length+1)*400+'px', // 设置ul默认宽度
            left:this.props.index*400*-1 + 'px', // 根据当前inedex  移动left值
            transition:`left ${this.props.speed}s linear`
        }
        return (
            <ul style={style} ref='ul'>
                {this.props.items.map((item,index)=>(
                    <li><img src={item.src} key={index}/></li>
                ))}
                {/*实现无缝轮播要再增加一张图*/}
                <li><img src={this.props.items[0].src} alt=""/></li>
            </ul>
        )
    }
}
复制代码

附上效果图

最后