天猫购物网站最显眼的就是轮播图了。我在学习一样新js库，一个新框架或新的编程思想的时候，总是感叹“入门必做选项卡，进阶须撸轮播图。”作为一个React组件，它是状态操控行为的典型，拿来练手是个不错的选择。

为了复习，这次就尝试用原生的javascript+React来完成。

轮播图原生实现

所谓轮播图其实是扩展版的选项卡。

先布局

主干架构

  1. <div id="tabs">
  2.         <ul id="btns">
  3.             <li><a href="javascript:;"></a></li>
  4.             <li><a href="javascript:;"></a></li>
  5.             <li><a href="javascript:;"></a></li>
  6.             <li><a href="javascript:;"></a></li>
  7.             <li><a href="javascript:;"></a></li>
  8.             <li><a href="javascript:;"></a></li>
  9.         </ul>
  10.         <ul id="imgs">
  11.             <li><img src="images/banner1.jpg"></li>
  12.             <li><img src="images/banner2.jpg"></li>
  13.             <li><img src="images/banner3.jpg"></li>
  14.             <li><img src="images/banner4.jpg"></li>
  15.             <li><img src="images/banner5.jpg"></li>
  16.             <li><img src="images/banner6.jpg"></li>
  17.         </ul>
  18.   </div>

样式如下

  1. /*css-reset*/
  2. *{
  3.   margin:0;
  4.   padding: 0;
  5. }
  6. ul li{
  7.   list-style: none;
  8. }
  9. img{
  10.     border: none;
  11. }
  12. a{
  13.   text-decoration: none;
  14. }
  16. /******************/
  17. #tabs{
  18.     width: 1130px;
  19.     height: 500px;
  20.     margin: 100px auto;
  21.     position: relative;
  22.     overflow: hidden;
  23. }
  24. #tabs li{
  25.     float: left;
  26. }
  27. #tabs img{
  28.     width: 1130px;
  29.     height: 500px;
  30. }
  31. #btns{
  32.     position: absolute;
  33.     top:88%;
  34.     left:395px;
  35.     z-index: 9;
  36. }
  37. #btns a{
  38.     display: block;
  39.     width: 17px;
  40.     height: 17px;
  41.     background: rgba(0,0,0,0.3);
  42.     border-radius: 50%;
  43.     border: 2px solid rgba(0,0,0,0.3);
  44. }
  45. #btns li{
  46.     margin: 10px;
  47. }

大概效果

纯javascript实现

事件

一个简单的轮播图包括多个事件。

  • 鼠标移入移出：当鼠标移出，或者是鼠标不在轮播图上面，执行自动播放
  • 当鼠标移入：不再自动播放，而且点击按钮会执行跳转到相应的页面。

渐变

因为6张图不是很多。所以考虑六张图全部做绝对定位，按照顺序叠加在一起。然再通过一个透明度的运动框架，实现之。

在此我选用这个运动框架：

  1. function getStyle(obj,attr){
  2.     if(obj.crrentStyle){
  3.         return obj.currentStyle[attr];
  4.         //兼容IE8以下
  5.     }else{
  6.         return getComputedStyle(obj,false)[attr];
  7.         //参数false已废。照用就好
  8.     }
  9. }
  11. function startMove(obj,json,fn){
  12.     //清理定时器
  13.     if(obj.timer){
  14.         clearInterval(obj.timer);
  15.     }
  16.     obj.timer=setInterval(function(){
  17.         var bStop=false;//如果为false就停了定时器！
  18.         var iCur=0;
  19.         // 处理属性值
  20.         for(var attr in json){
  21.             if(attr=='opacity'){
  22.                 iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
  23.             }else{
  24.                 iCur=parseInt(getStyle(obj,attr));
  25.             }
  26.             //定义速度值
  27.             var iSpeed=(json[attr]-iCur)/8;
  28.             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  29.             //检测停止：如果我发现某个值不等于目标点bStop就不能为true。
  30.             if(iCur!==json[attr]){
  31.                 bStop=false;
  32.             }
  33.             if(attr=='opacity'){
  34.                 obj.style[attr]=(iCur+iSpeed)/100;
  35.                 obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
  36.             }else{
  37.                 obj.style[attr]=iCur+iSpeed+'px';
  38.             }
  39.         }
  40.         //检测是否停止，是的话关掉定时器
  41.         if(bStop===true){
  42.             if(iCur==json[attr]){
  43.                 clearInterval(obj.timer);
  44.                 if(fn){
  45.                     fn();
  46.                 }
  47.             }
  48.         }
  49.     },30);
  50. }

这个框架可以指定样式值进行渐变。

不得不说，这确实是一个很棒的运动框架。可以把它单独放在为一个名为move.js的文件中再引入。

根据这个思路写出原生的代码：

  1. window.onload=function(){
  2.     var oTab=document.getElementById('tabs');
  3.     var oBtns=document.getElementById('btns');
  4.     var aBtns=document.getElementsByTagName('a');
  5.     var oImgs=document.getElementById('imgs');
  6.     var aImgsLi=oImgs.getElementsByTagName('li');
  7.     var bCheck=true;
  8.     var iNow=0;
  10.     // 以下是初始化设置：
  11.     aBtns[0].style.background='rgba(255,255,255,0.5)';
  12.     aImgsLi[0].style.zIndex=6;
  14.     function iNowlistener(){//改变的核心函数
  15.         // 初始化
  16.         for(var i=0;i<aBtns.length;i++){
  17.             aBtns[i].style.background='rgba(0,0,0,0.3)';
  18.         }
  19.         aBtns[iNow].style.background='rgba(255,255,255,0.5)';
  20.         for(var j=0;j<aBtns.length;j++){
  21.             aImgsLi[j].style.opacity=0;
  22.             if(j!==iNow){
  23.                 aImgsLi[j].style.display='none';
  24.             }else{
  25.                 aImgsLi[j].style.display='block';
  26.                 startMove(aImgsLi[j],{'opacity':100});
  27.             }
  28.         }
  29.     }
  31.     var timer=null;
  32.     timer=setInterval(function(){
  33.         if(bCheck){
  34.             if(iNow==5){//将最后一个变为0
  35.                 iNow=0;
  36.             }else{
  37.                 iNow++;
  38.             }
  39.             iNowlistener();
  40.         }else{
  41.             return false;
  42.         }
  43.     },2000);
  45.     oTab.onmouseover=function(){
  46.         bCheck=false;
  47.         for(var i=0;i<aBtns.length;i++){
  48.             aBtns[i].index=i;
  49.             aBtns[i].onmouseover=function(){
  50.                 if(this.index==iNow){
  51.                     return false;
  52.                 }else{
  53.                     iNow=this.index;
  54.                     iNowlistener();
  55.                 }
  56.             };
  57.         }
  59.     };
  61.     oTab.onmouseout=function(){
  62.         bCheck=true;
  63.     };
  65. };

效果如下：



不得不说，原生的代码写起来好长好长。

很长吗？后面的更长。

React思路

以上原生代码已经经过了初步的封装——比如INowListener。但是在React的价值观来说，显然还需要进一步的封装。甚至重新拆分。最理想的情况是：顶层组件作为主干架构和状态机。下层组件接收状态并运行方法。

多少个组件？

在这个轮播图中，就三个组件。

  1. - Tabs
  2.    -imgs
  3.    -btns
  1. var Tabs=React.createClass({
  2.             render:function(){
  4.                 return (
  5.                     <div id="tabs">
  6.                         <Btns/>
  7.                         <Imgs/>
  8.                     </div>
  9.                 );
  10.             }
  11.         });
  13.         var Btns=React.createClass({
  14.             render:function(){
  15.                 var arr=[];
  16.                 for(var i=0;i<6;i++){
  17.                     var btnContent=
  18.                       <li key={i.toString()}><a href="javascript:;"></a></li>
  19.                     arr.push(btnContent);
  20.                 }
  21.                 return (
  22.                     <ul id="btns">{arr}</ul>
  23.                 )
  24.             }
  25.         });
  27.         var Imgs=React.createClass({
  28.             render:function(){
  29.                 var arr=[];
  30.                 for(var i=0;i<6;i++){
  31.                     var imgContent=
  32.                       <li key={i.toString()}><img src={"images/banner"+(i+1)+".jpg"}/></li>
  33.                     arr.push(imgContent);
  34.                     console.log(arr)
  35.                 }
  36.                 return (
  37.                     <ul id="imgs">{arr}</ul>
  38.                 );
  39.             }
  40.         });
  42.         ReactDOM.render(
  43.             <Tabs/>,
  44.             document.getElementById('example')
  45.         )

这样写就把样式写出来了。

哪个是状态？

iNOW是状态。而且是最重要的状态！既然这样，就考虑把状态iNow放顶层。

鼠标悬停看起来也是状态，但悬停按钮上，触发iNow改变——因此还是iNow。

鼠标移入移出事件，应该是状态。但是这个移入移出的状态依赖于iNow。所以不能单独用。

需要哪些props？

构造组件时，为了灵活性，一般都不考虑把组件框架写死。比如图片张数，id名，等等都应该是props。但是这些暂时来说，都是次要的。

状态肯定是一个核心props，此外，底层设置状态的回调也是核心的props之一。

空谈太多无意义，接下来尝试实现！

自动按钮

现在先不考虑其它，单看按钮。

在插入文档之后，开启一个定时器，每隔2000ms执行一次状态更新。

setState的写法

那涉及到了iNow状态根据前一个状态更新，官方文档不建议这种写法：

  1. this.setState({
  2.     return {
  3.         iNow:this.state.iNow+1
  4.     }
  5. })

因为状态更新可能是异步的。这样写很容易出问题。

事实上，官网提供了这样的写法:

  1. this.setState(function(prev,props){
  2.     return {
  3.         iNow:prev.iNow+1
  4.     }
  5. })

在这里只用第一个参数就够了。

想当然的按钮

定时器应该是一个状态计算器。

所以按钮可以这么写：

  1. var Btns=React.createClass({
  2.             getInitialState:function(){
  3.                 return ({
  4.                     iNow:0
  5.                 })
  6.             },
  7.             componentDidMount:function(){
  8.                 var _this=this;
  9.                 setInterval(function(){
  10.                     _this.setState(function(prev){
  11.                         //console.log(prev)
  12.                         if(prev.iNow==5){
  13.                             return {
  14.                                 iNow:0
  15.                             };
  16.                         }else{
  17.                             return {
  18.                                 iNow:prev.iNow+1
  19.                             };
  20.                         }
  21.                     })
  22.                 },2000);
  23.             },
  24.             render:function(){
  25.                 var arr=[];
  26.                 for(var i=0;i<6;i++){
  27.                     var btnContent=null;
  28.                     if(i==this.state.iNow){
  29.                         btnContent=
  30.                           <li key={i.toString()}><a style={{background:'rgba(255,255,255,0.5)'}} href="javascript:;"></a></li>
  31.                     }else{
  32.                         btnContent=
  33.                           <li key={i.toString()}><a href="javascript:;"></a></li>
  34.                     }
  36.                     arr.push(btnContent);
  37.                 }
  39.                 return (
  40.                     <ul id="btns">{arr}</ul>
  41.                 );
  42.             }
  43.         });

按钮就实现了。

看起来不错，但是这样写可能在未来造成极大的不便。

悬停交互

再强调一次价值观这个概念，按照React的价值观，状态应该从顶层传下去，况且在这个案例中，顶层Tabs组件做一件事就够了：状态机，在Btn组件插入到文档之后，打开这个定时器。底层组件比如Btns根据状态每隔2000ms通过props刷新变化。

同时，我还要实现一个简单的交互功能：当鼠标悬停在Tabs上时，不再允许iNow自动更新。——可以做一个bCheck开关，当Tabs组件鼠标移入/移出时，触发bCheck的来回变化。

此处可能有个小问题，就是鼠标一道按钮组上时，会造成bCheck抖动。但是最后又变回false。所以认为不影响。

很自然想到，bCheck为false时，关闭定时器。但是这样做又等于浪费了定时器的功能，回调方法中一旦关掉定时器，再重新定时器就不是一般的麻烦了，为什么不直接在定时器做判断呢？所以我认为不应该让定时器停下来。只需要改变定时器计算iNow的行为就行了。

  1. var Tabs=React.createClass({
  2.             getInitialState:function(){
  3.                 return {
  4.                     iNow:0,
  5.                     bCheck:true//为false时不允许定时器计算更新iNow
  6.                 }
  7.             },
  8.             setInow:function(){
  9.             var _this=this;
  10.             var timer=setInterval(function(){
  11.                   if(_this.state.bCheck){
  12.                       //console.log(_this.state.bCheck)
  13.                       _this.setState(function(prev){
  14.                           if(prev.iNow==5){
  15.                               return {
  16.                                   iNow:0
  17.                               };
  18.                           }else{
  19.                               return {
  20.                                   iNow:prev.iNow+1
  21.                               };
  22.                           }
  23.                       });
  24.                   }else{
  25.                       console.log('该停了!')
  26.                       return false;
  27.                   }
  29.               },2000);
  31.           },
  32.             checkSwitch:function(){
  33.                 this.setState(function(prev){
  34.                     return {
  35.                         bCheck:!prev.bCheck,
  36.                     }
  37.                 })
  38.             },
  39.             render:function(){
  40.                 return (
  41.                     <div id="tabs" onMouseOver={this.checkSwitch} onMouseOut={this.checkSwitch}>
  42.                         <Btns iNow={this.state.iNow} setInow={this.setInow}/>
  43.                         <Imgs/>
  44.                     </div>
  45.                 );
  46.             }
  47.         });
  49.         var Btns=React.createClass({
  50.             componentDidMount:function(){
  51.                 this.props.setInow();//插入后就执行回调方法
  52.             },
  53.             render:function(){
  54.                 var arr=[];
  55.                 for(var i=0;i<6;i++){
  56.                     var btnContent=null;
  57.                     if(i==this.props.iNow){
  58.                         btnContent=
  59.                           <li key={i.toString()}>
  60.                           <a style={{background:'rgba(255,255,255,0.5)'}} href="javascript:;"></a>
  61.                           </li>
  62.                     }else{
  63.                         btnContent=
  64.                           <li key={i.toString()}><a href="javascript:;"></a></li>
  65.                     }
  67.                     arr.push(btnContent);
  68.                 }
  70.                 return (
  71.                     <ul id="btns">{arr}</ul>
  72.                 );
  73.             }
  74.         });

图片动画

一件事三个步骤

图片组件虽说只是做一件事情（根据iNow渲染效果），但是也得分三步来做。

  • 首先，渲染前应该保证索引值非iNow的所有图片display为none。索引值为iNow的图片透明度为0。（初始化）

  • 其次，在首次插入文档完毕之后（componentDidMount），对第0张图执行startMove函数。

  • 第三，需要一个监听顶层iNow的方法。定时器已经给Btns组件用了，再用就会出错。

    留意到Imgs组件实际上只接受一个会变化的props那就是iNow。因此采用componentWillReceiveProps。

生命周期方法

componentWillReceiveProps

组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

  1.     componentWillReceiveProps: function(nextProps) {
  2.         if (nextProps.bool) {
  3.             this.setState({
  4.                 bool: true
  5.             });
  6.         }
  7.     }

这里采用的两个组件周期方法都是组件真实存在时的方法。所以可以直接使用真实的DOM命令。

实现

  1. var Tabs=React.createClass({
  2.         getInitialState:function(){
  3.             return {
  4.                 iNow:0,
  5.                 bCheck:true
  6.             };
  7.         },
  8.         setInow:function(){
  9.             var _this=this;
  10.             var timer=setInterval(function(){
  11.                 if(_this.state.bCheck){
  12.                     //console.log(_this.state.bCheck)
  13.                     _this.setState(function(prev){
  14.                         if(prev.iNow==5){
  15.                             return {
  16.                                 iNow:0
  17.                             };
  18.                         }else{
  19.                             return {
  20.                                 iNow:prev.iNow+1
  21.                             };
  22.                         }
  23.                     });
  24.                 }else{
  25.                     console.log('该停了!')
  26.                     return false;
  27.                 }
  29.             },2000);
  31.         },
  32.         checkSwitch:function(){
  33.             console.log(this.state.bCheck)
  34.             this.setState(function(prev){
  35.                 return {
  36.                     bCheck:!prev.bCheck
  37.                 };
  38.             });
  39.         },
  40.         render:function(){
  41.             return (
  42.                 <div id="tabs"
  43.                   onMouseOver={this.checkSwitch}
  44.                   onMouseOut={this.checkSwitch}>
  45.                     <Btns iNow={this.state.iNow}
  46.                       setInow={this.setInow} />
  47.                     <Imgs iNow={this.state.iNow}/>
  48.                 </div>
  49.             );
  50.         }
  51.     });
  53.     var Btns=React.createClass({
  54.         componentDidMount:function(){
  55.             this.props.setInow();
  56.         },
  58.         render:function(){
  59.             var arr=[];
  60.             for(var i=0;i<6;i++){
  61.                 var btnsContent=null;
  62.                 if(i==this.props.iNow){
  63.                     btnsContent=
  64.                         <li key={i.toString()}>
  65.                             <a style={{background:'rgba(255,255,255,0.5)'}} href="javascript:;"></a>
  66.                         </li>
  67.                 }else{
  68.                     btnsContent=
  69.                         <li key={i.toString()}>
  70.                             <a href="javascript:;"></a>
  71.                         </li>
  72.                 }
  73.                 arr.push(btnsContent);
  74.             }
  76.             return (
  77.                 <ul id="btns">{arr}</ul>
  78.             );
  79.         }
  80.     });
  82.     var Imgs=React.createClass({
  83.         componentDidMount:function(){//刚开始加载时，就执行动画函数
  84.             var iNow=this.props.iNow;
  85.             var obj=document.getElementById('imgs').getElementsByTagName('li')[iNow].childNodes[0];
  86.             startMove(obj,{'opacity':100});
  87.         },
  88.         componentWillReceiveProps:function(nextProps){
  89.             var obj=document.getElementById('imgs').getElementsByTagName('li')[nextProps.iNow].childNodes[0];
  90.             //console.log(obj)
  91.             startMove(obj,{'opacity':100});
  92.         },
  93.         // this.startMove:startMove(),
  94.         render:function(){
  95.             var arr=[];
  96.             for(var i=0;i<6;i++){
  97.                 var imgsContent=null
  98.                 if(i==this.props.iNow){
  99.                     imgsContent=
  100.                         <li key={i.toString()}>
  101.                             <img style={{opacity:'0'}} src={'images/banner'+(i+1)+'.jpg'} />
  102.                         </li>
  103.                     arr.push(imgsContent);
  104.                 }else{
  105.                     imgsContent=
  106.                         <li key={i.toString()}>
  107.                             <img style={{display:'none'}} src={'images/banner'+(i+1)+'.jpg'} />
  108.                         </li>
  109.                     arr.push(imgsContent);
  110.                 }
  112.             }
  114.             return (
  115.                 <ul id="imgs">{arr}</ul>
  116.             )
  117.         }
  118.     })
  120.     ReactDOM.render(
  121.         <Tabs/>,
  122.         document.getElementById('example')
  123.     );

看起来Imgs组件已经很完备了。——就它的功能来说已经没有什么需要添加了。

鼠标悬停改变iNow

这个事件只能在底层组件Btns上实现。所以要拿到悬停的索引值。

然后通过回调，把该按钮的索引值设置为整个组件Tabs的状态iNow。

为了干这两件事，还是用一个changeInow(e)函数来包装它们。

给谁绑定？加什么事件？

为了忠实原来的代码。我给a标签加onMouseOver事件。

加了事件直接，秉承这React的核心价值观（一个组件只干一件事），我把get到的index值通过this.props.setInow传递回去。只要顶层的iNow变了，下面的组件不管什么状态，都会乖乖听话了。

如何获取当前悬停的索引值？

在Jquery很容易使用index方法来获取索引值。但是在原生方法中，还得费一番周章。

给所有a绑定一个onMouseOver事件，假设该事件方法的参数为e，那么e.target就是该参数的方法。

这需要写一个getIndex方法

  1. ...
  2. getIndex:function(e){
  3.   var list=e.target.parentNode.parentNode.childNodes;
  4.   for(var i=0;i<list.length;i++){
  5.     if(list[i]===e.target.parentNode){
  6.       return  i;
  7.     }
  8.   }
  9. },
  10. ...

拿到索引值之后

——就把它设置为顶层的iNow。

既然决定通过this.props.setInow回调，那么还得传一个索引值参数，回到顶层稍微修改下方法，就实现了。

全部代码：

  1. var Tabs=React.createClass({//顶层组件
  2.         getInitialState:function(){
  3.             return {
  4.                 iNow:0,
  5.                 bCheck:true
  6.             };
  7.         },
  8.         setInow:function(index){//核心状态计算工具：依赖定时器进行实时刷新
  9.             if(index!==undefined){//如果参数有内容。
  10.                 this.setState({
  11.                     iNow:index
  12.                 });
  13.             }else{
  14.                 var _this=this;
  15.                 this.timer=setInterval(function(){
  16.                     if(_this.state.bCheck){
  17.                         //console.log(_this.state.bCheck)
  18.                         _this.setState(function(prev){
  19.                             if(prev.iNow==5){
  20.                                 return {
  21.                                     iNow:0
  22.                                 };
  23.                             }else{
  24.                                 return {
  25.                                     iNow:prev.iNow+1
  26.                                 };
  27.                             }
  28.                         });
  29.                     }else{
  30.                         //console.log('该停了!')
  31.                         return false;
  32.                     }
  33.                 },2000);
  34.             }
  35.         },
  36.         checkSwitch:function(){
  37.             //console.log(this.state.bCheck)
  38.             this.setState(function(prev){
  39.                 return {
  40.                     bCheck:!prev.bCheck
  41.                 };
  42.             });
  43.         },
  44.         render:function(){
  45.             return (
  46.                 <div id="tabs"
  47.                   onMouseOver={this.checkSwitch}
  48.                   onMouseOut={this.checkSwitch}>
  49.                     <Btns iNow={this.state.iNow}
  50.                       setInow={this.setInow} />
  51.                     <Imgs iNow={this.state.iNow}/>
  52.                 </div>
  53.             );
  54.         }
  55.     });
  57.     var Btns=React.createClass({
  58.         componentDidMount:function(){
  59.             this.props.setInow();
  60.         },
  61.         getIndex:function(e){//获取a的父级索引值
  62.             var list=e.target.parentNode.parentNode.childNodes;
  63.             for(var i=0;i<list.length;i++){
  64.                 if(list[i]===e.target.parentNode){
  65.                     return i;
  66.                 }
  67.             }
  68.         },
  69.         changeInow:function(e){//回调方法
  70.             //console.log($(e.target).parent().index());
  71.             //console.log(this.getIndex(e));
  72.             var index=this.getIndex(e);
  73.             this.props.setInow(index)
  74.         },
  76.         render:function(){
  77.             var arr=[];
  78.             for(var i=0;i<6;i++){
  79.                 var btnsContent=null;
  80.                 var index=i;
  81.                 if(i==this.props.iNow){
  82.                     btnsContent=
  83.                         <li key={i.toString()}>
  84.                             <a onMouseOver={this.changeInow} style={{background:'rgba(255,255,255,0.5)'}} href="javascript:;"></a>
  85.                         </li>
  86.                 }else{
  87.                     btnsContent=
  88.                         <li key={i.toString()}>
  89.                             <a  onMouseOver={this.changeInow} href="javascript:;"></a>
  90.                         </li>
  91.                 }
  92.                 arr.push(btnsContent);
  93.             }
  95.             return (
  96.                 <ul id="btns">{arr}</ul>
  97.             );
  98.         }
  99.     });
  101.     var Imgs=React.createClass({
  102.         componentDidMount:function(){//刚开始加载时，就执行动画函数
  103.             var iNow=this.props.iNow;
  104.             var obj=document.getElementById('imgs').getElementsByTagName('li')[iNow].childNodes[0];
  105.             startMove(obj,{'opacity':100});
  106.         },
  107.         componentWillReceiveProps:function(nextProps){
  108.             var obj=document.getElementById('imgs').getElementsByTagName('li')[nextProps.iNow].childNodes[0];
  109.             //console.log(obj)
  110.             startMove(obj,{'opacity':100});
  111.         },
  112.         // this.startMove:startMove(),
  113.         render:function(){
  114.             var arr=[];
  115.             for(var i=0;i<6;i++){
  116.                 var imgsContent=null
  117.                 if(i==this.props.iNow){
  118.                     imgsContent=
  119.                         <li key={i.toString()}>
  120.                             <img style={{opacity:'0'}} src={'images/banner'+(i+1)+'.jpg'} />
  121.                         </li>
  122.                     arr.push(imgsContent);
  123.                 }else{
  124.                     imgsContent=
  125.                         <li key={i.toString()}>
  126.                             <img style={{display:'none'}} src={'images/banner'+(i+1)+'.jpg'} />
  127.                         </li>
  128.                     arr.push(imgsContent);
  129.                 }
  131.             }
  133.             return (
  134.                 <ul id="imgs">{arr}</ul>
  135.             )
  136.         }
  137.     })
  139.     ReactDOM.render(
  140.         <Tabs/>,
  141.         document.getElementById('example')
  142.     );

完善

我们要让这个组件可复用，换言之就是把之前写死的东西比如图片数量，样式，id名都变成Tabs的props属性。

这下工作量够了吧。原来50多行的东西改写完之后大概150多行。

  1. var Tabs=React.createClass({//顶层组件
  2.         getInitialState:function(){
  3.             return {
  4.                 iNow:0,
  5.                 bCheck:true
  6.             };
  7.         },
  8.         setInow:function(index){//核心状态计算工具：依赖定时器进行实时刷新
  9.             if(index!==undefined){//如果参数有内容。
  10.                 this.setState({
  11.                     iNow:index
  12.                 });
  13.             }else{
  14.                 var _this=this;
  15.                 this.timer=setInterval(function(){
  16.                     if(_this.state.bCheck){
  17.                         //console.log(_this.state.bCheck)
  18.                         _this.setState(function(prev){
  19.                             if(prev.iNow==this.props.nums-1){
  20.                                 return {
  21.                                     iNow:0
  22.                                 };
  23.                             }else{
  24.                                 return {
  25.                                     iNow:prev.iNow+1
  26.                                 };
  27.                             }
  28.                         });
  29.                     }else{
  30.                         //console.log('该停了!')
  31.                         return false;
  32.                     }
  33.                 },this.props.timer);
  34.             }
  35.         },
  36.         checkSwitch:function(){
  37.             //console.log(this.state.bCheck)
  38.             this.setState(function(prev){
  39.                 return {
  40.                     bCheck:!prev.bCheck
  41.                 };
  42.             });
  43.         },
  44.         render:function(){
  45.             return (
  46.                 <div id={this.props.idNames.main}
  47.                   onMouseOver={this.checkSwitch}
  48.                   onMouseOut={this.checkSwitch}>
  50.                     <Btns iNow={this.state.iNow}
  51.                       setInow={this.setInow}
  52.                       nums={this.props.nums}
  53.                       idNames={this.props.idNames} />
  55.                     <Imgs iNow={this.state.iNow}
  56.                     nums={this.props.nums}
  57.                     idNames={this.props.idNames}
  58.                     imgType={this.props.imgType} />
  60.                 </div>
  61.             );
  62.         }
  63.     });
  65.     var Btns=React.createClass({
  66.         componentDidMount:function(){
  67.             this.props.setInow();
  68.         },
  69.         getIndex:function(e){//获取a的父级索引值
  70.             var list=e.target.parentNode.parentNode.childNodes;
  71.             for(var i=0;i<list.length;i++){
  72.                 if(list[i]===e.target.parentNode){
  73.                     return i;
  74.                 }
  75.             }
  76.         },
  77.         changeInow:function(e){//回调方法
  78.             //console.log($(e.target).parent().index());
  79.             //console.log(this.getIndex(e));
  80.             var index=this.getIndex(e);
  81.             this.props.setInow(index)
  82.         },
  84.         render:function(){
  85.             var arr=[];
  86.             for(var i=0;i<this.props.nums;i++){
  87.                 var btnsContent=null;
  88.                 var index=i;
  89.                 if(i==this.props.iNow){
  90.                     btnsContent=
  91.                         <li key={i.toString()}>
  92.                             <a onMouseOver={this.changeInow} id={this.props.idNames.active} href="javascript:;"></a>
  93.                         </li>
  94.                 }else{
  95.                     btnsContent=
  96.                         <li key={i.toString()}>
  97.                             <a  onMouseOver={this.changeInow} href="javascript:;"></a>
  98.                         </li>
  99.                 }
  100.                 arr.push(btnsContent);
  101.             }
  103.             return (
  104.                 <ul id={this.props.idNames.btns}>{arr}</ul>
  105.             );
  106.         }
  107.     });
  109.     var Imgs=React.createClass({
  110.         componentDidMount:function(){//刚开始加载时，就执行动画函数
  111.             var iNow=this.props.iNow;
  112.             var obj=document.getElementById(this.props.idNames.imgs).getElementsByTagName('li')[iNow].childNodes[0];
  113.             startMove(obj,{'opacity':100});
  114.         },
  115.         componentWillReceiveProps:function(nextProps){//每当收到新的props就执行动画
  116.             var obj=document.getElementById(this.props.idNames.imgs).getElementsByTagName('li')[nextProps.iNow].childNodes[0];
  117.             //console.log(obj)
  118.             startMove(obj,{'opacity':100});
  119.         },
  121.         render:function(){
  122.             var arr=[];
  123.             for(var i=0;i<this.props.nums;i++){
  124.                 var imgsContent=null;
  125.                 var src=this.props.imgType.url+this.props.imgType.name+(i+1)+'.'+this.props.imgType.type;
  126.                 if(i==this.props.iNow){
  127.                     imgsContent=
  128.                         <li key={i.toString()}>
  129.                             <img style={{opacity:'0'}} src={src} />
  130.                         </li>
  131.                     arr.push(imgsContent);
  132.                 }else{
  133.                     imgsContent=
  134.                         <li key={i.toString()}>
  135.                             <img style={{display:'none'}} src={src} />
  136.                         </li>
  137.                     arr.push(imgsContent);
  138.                 }
  139.             }
  141.             return (
  142.                 <ul id={this.props.idNames.imgs}>{arr}</ul>
  143.             )
  144.         }
  145.     })
  147.     ReactDOM.render(
  148.         <Tabs
  149.           nums={6}
  150.           timer={2000}
  151.           idNames={
  152.               {
  153.                   main:"tabs",
  154.                   btns:"btns",
  155.                   imgs:"imgs",
  156.                   active:"btn-active"
  157.               }
  158.           }
  159.           imgType={
  160.               {
  161.                   type:"jpg",
  162.                   url:"images/",
  163.                   name:"banner"
  164.               }
  165.           }
  166.            />,
  167.         document.getElementById('example')
  168.     );

其中多设置了一个#btn-active样式。

  1. #btn-active{
  2.     background:rgba(255,255,255,0.5)!important;
  3. }

是不是好长好长呢？

demo地址：

http://djtao.top/tabs/

但是这个确实是一个可复用的，而且还是原生js写成的组件。

不得不说，作为一个初学几天的人，写这东西时的时候遭遇好多的坑。但是最后“蓦然回首，那人却在灯火阑珊处”，也有种人生三境界的感悟了！

React视角下的轮播图的更多相关文章

  1. React Native 如何做轮播图 react-native-swiper

    //:仿饿了么github:https://github.com/stoneWeb/elm-react-native 欢迎各位同学加入: React-Native群:397885169 大前端群:54 ...

  2. React 轮播图实现

    接到项目, 用react和material-ui实现轮播图. 搜索了一些方法参考, 不论语言/框架的使用,大体上分为两种思路 超宽列表实现法 在原生JS或者JQuery中,轮播图的实现一般是这样子的 ...

  3. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  4. React Native学习（六）—— 轮播图

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  5. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  6. react轮播图----react-slick

    1.安装 npm install react-slick; //安装样式 npm install slick carousel; 再在App.css中引入 @import "~slick-c ...

  7. React Native 之轮播图swiper组件

    注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...

  8. React Native布局实践：开发京东client首页（三）——轮播图的实现

    上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...

  9. 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

随机推荐

  1. ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock

    ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock 通过终端安装程序sudo apt-get install xxx时出错:E: Could not ...

  2. mount常用挂载命令

    挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用到的. 命令格式: mount [-t vfstype] [-o optio ...

  3. Ubuntu 一直掉线 以及连不上网 解决办法

    新装了一个Ubuntu 系统16.04才使用的时候一切顺利 但是过了两三天  就会出现 频繁掉线的情况 于是上网找大神们的解决办法 把文件 /etc/ppp/options 里面的一个数值改大一点 l ...

  4. 常用算法——排序（二）

    简单选择排序法 选择排序(Selection Sort)的基本思想:对n个记录进行扫描,选择最小的记录,将其输出,接着在剩下的n-1个记录中扫描,选择最小的记录将其输出,--不断重复这个过程,直到只剩 ...

  5. spring.net 框架分析（三）ContextRegistry.GetContext()

    我们通过ContextRegistry.GetContext()建立了一个IApplicationContext得实例,那么这个实例具体是怎么建立的了. 我们来分析一下容器实例建立的过程: 我们在配置 ...

  6. [LeetCode] Battleships in a Board 平板上的战船

    Given an 2D board, count how many different battleships are in it. The battleships are represented w ...

  7. [LeetCode] Divide Two Integers 两数相除

    Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...

  8. Android开发之带你轻松集成友盟统计

    友盟统计是什么呢?为什么要集成他呢? 当我们需要获取自己写的软件的装机量和用户使用信息时,这时我们可以集成友盟统计. 首先到友盟统计中注册账号什么的就不废话了,直接看创建项目: 在个人中心中的管理里面 ...

  9. 【ios开发】UITableViewCell的重用

    移动开发需要解决的一个问题就是资源稀缺的问题.多数情况下是内存问题. 虽然现在的手机都号称大内存,高配置.但是移动app所占用的资源也在跟着不断膨胀, 也是造成内存不足的主要原因. 在前面的例子中,还 ...

  10. re

    Python3正则表达式应用: 目的:获取匹配的字符串 输出:直接输出或是.group() / .group(0) 常用函数: re.compile 可以把正则表达式编译成一个正则表达式对象,这样可以 ...