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 相关文章推荐
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
JS实现碰撞检测效果
Mar 12 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
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
实例解析Array和String方法
2016/12/14 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python判断有效的数独算法示例
2019/02/23 Python
django 取消csrf限制的实例
2020/03/13 Python
Django中FilePathField字段的用法
2020/05/21 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
C,C++的几个面试题小集
2013/07/13 面试题
建筑专业自荐信
2013/10/18 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
财务部绩效考核方案
2014/05/04 职场文书
工程造价专业求职信
2014/07/17 职场文书
世界文化遗产导游词
2015/02/13 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
nginx静态资源的服务器配置方法
2022/07/07 Servers