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 相关文章推荐
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
vue地区选择组件教程详解
May 04 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
js实现幻灯片轮播图
Aug 14 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采集时被封ip的解决方法
2010/08/29 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
python计算auc指标实例
2017/07/13 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
图解Python变量与赋值
2018/04/03 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
python 调整图片亮度的示例
2020/12/03 Python
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
医学生求职自荐信
2013/10/25 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
项目合作协议书范本
2014/04/16 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
小学安全工作总结2015
2015/05/18 职场文书