react无缝滚动_react 实现一个无限循环的轮播器 附github地址

一个简单的轮播

为了更具有通用和参考性,轮播组件中,轮播只使用了react,没有添加其他的状态管理,或者参数类型限制的库. 所以这个轮播的方法,同样可以用于vue 等其他框架

github地址

最终效果

d5a994b0423e4a409f77d846b2a4cf21.gif

显示无限循环原理

如图所示,如果轮播里面有三个部分,那么可以在首端前添加一个跟最后一块一样的dom节点,同理在最末端添加跟首端相同的节点,这样当轮播到末端,在下一张的情况下,就可以无缝衔接首端的节点,然后当动画结束后,在直接切换到真正的首端,就实现了无缝衔接的轮播器

0493e407e5844378aa8be29f68d5694c.png

87e41cdcdbcd183978af641006bd1058.gif

组件代码

import React, {Component} from 'react';

import style from './style.use.less';

export default class Test extends Component {

static defaultProps = {

step: 2000,

animationStep: 1

}

constructor(props) {

super(props)

this.state = {

currentCarousel: 0,

translateList: [],

animationStep: 0,

}

this.handleCarouselBodyMouseOver = this.handleCarouselBodyMouseOver.bind(this);

this.handleCarouselBodyMouseOut = this.handleCarouselBodyMouseOut.bind(this);

this.handleCarouselFooterMouseOver = this.handleCarouselFooterMouseOver.bind(this);

this.renderIndicators = this.renderIndicators.bind(this);

this.getIndicatorsActive = this.getIndicatorsActive.bind(this);

this.handlerNext = this.handlerNext.bind(this);

this.handlerTransitionEn

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,实现一个无限循环轮播,不使用任何hook和轮播UI库,可以按照以下步骤进行: 1. 创建一个React组件,命名为Carousel。 2. 在组件的constructor中初始化state,包括图片数据、当前图片的索引、轮播定时等。 ``` constructor(props) { super(props); this.state = { images: [ { id: 1, src: 'image1.jpg' }, { id: 2, src: 'image2.jpg' }, { id: 3, src: 'image3.jpg' }, { id: 4, src: 'image4.jpg' }, { id: 5, src: 'image5.jpg' }, ], currentIndex: 0, timer: null, }; } ``` 3. 在组件的componentDidMount生命周期方法中,启动轮播定时。 ``` componentDidMount() { const timer = setInterval(() => { this.handleNext(); }, 3000); this.setState({ timer }); } ``` 4. 在组件的componentWillUnmount生命周期方法中,清除轮播定时。 ``` componentWillUnmount() { clearInterval(this.state.timer); } ``` 5. 实现handleNext和handlePrev方法,分别用于切换到下一张和上一张图片。 ``` handleNext = () => { const { images, currentIndex } = this.state; const nextIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1; this.setState({ currentIndex: nextIndex }); } handlePrev = () => { const { images, currentIndex } = this.state; const prevIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1; this.setState({ currentIndex: prevIndex }); } ``` 6. 在render方法中,渲染轮播图片和切换按钮。 ``` render() { const { images, currentIndex } = this.state; const prevIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1; const nextIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1; return ( <div className="carousel"> <div className="carousel-images"> <img src={images[prevIndex].src} alt="prev" /> <img src={images[currentIndex].src} alt="current" /> <img src={images[nextIndex].src} alt="next" /> </div> <div className="carousel-buttons"> <button onClick={this.handlePrev}>Prev</button> <button onClick={this.handleNext}>Next</button> </div> </div> ); } ``` 7. 在CSS中设置轮播图片的样式,包括绝对定位、宽度、高度等。 ``` .carousel-images { position: relative; width: 100%; height: 400px; } .carousel-images img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .carousel-images img:nth-child(2) { z-index: 1; } .carousel-images img:first-child { z-index: 2; transform: translateX(-100%); } .carousel-images img:last-child { transform: translateX(100%); } ``` 这样就完成了一个简单的React无缝滚动轮播实现

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值