React实现轮播效果


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了React实现轮播,供大家参考,具体内容如下

思路

1、使用全局的state进行状态管理
2、设置全局下标,对当前的图片下表进行样式划分
3、定时循环人物便利改变全局下标 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    ul{
      width: 100%;
      text-align: center;
      list-style-type: circle;
    }
    ul>li{
      width: 2%;
      float: left;
    }
    img{
      width: 100%;
    }
    </style>
  <title>轮播事件</title>
</head>
<body>
  <div id="root" style="max-width: 700px;margin: 0 auto;"></div>
</body>
 
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
  window.onload=()=>{
    class Img extends React.Component{
      constructor(props) {
        super(props);
        this.state={
          listImg:[
            './img/banner1.jpg', 
            './img/banner2.jpg', 
            './img/banner3.jpg', 
            './img/banner4.jpg',
            './img/banner5.jpg',
          ],
          index:0
        }
      }
      //计时器执行
      indexChange(){
        if(this.state.index == this.state.listImg.length-1){
          this.setState({
            index:0
          })
        }else{
          // this.state.index++;
          this.setState({
            index:this.state.index+1
          })
          console.log(this.state.index);
        }
      }
      componentDidMount(){
        setInterval(()=>{
          this.indexChange();
        },2000)
      }
      render(){
        let {listImg,index} = this.state;
        let imgList=listImg.map((item,imgIndex)=>{
          return <img src={item} key={imgIndex} style={{'display':index == imgIndex ? 'block' : 'none'}} className='img'/>  
        })
        let liList=listImg.map((item2,imgIndex2)=>{
          return <li key={imgIndex2} style={{'listStyleType':index == imgIndex2 ? 'initial' :'circle'}}></li> 
        })
        return (
          <div>
              {imgList}
            <div>
              <ul>
                {liList}
              </ul> 
            </div>
          </div>
        )
      
      }
    }
    
    ReactDOM.render(
      <Img />,
      document.getElementById("root")
    )
  }
 
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
jQuery 动画基础教程
Dec 25 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
Angular 多模块项目构建过程
Feb 13 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
React实现全选功能
Aug 25 #Javascript
react实现复选框全选和反选组件效果
Aug 25 #Javascript
js实现数字跳动到指定数字
Aug 25 #Javascript
js实现点击选项置顶动画效果
Aug 25 #Javascript
理解JavaScript中的对象
Aug 25 #Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 #Javascript
node.js基础知识汇总
Aug 25 #Javascript
You might like
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jQuery功能函数详解
2015/02/01 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
python主要用于哪些方向
2020/07/05 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
QA工程师岗位职责
2013/11/20 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
申论倡议书范文
2014/05/13 职场文书
分公司任命书
2014/06/06 职场文书
大学生就业求职信
2014/06/12 职场文书
教师职位说明书
2014/07/29 职场文书
单位单身证明样本
2014/10/11 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
青年文明号汇报材料
2014/12/23 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
Java中的随机数Random
2022/03/17 Java/Android
基于Python实现对比Exce的工具
2022/04/07 Python