<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> <style> *{ margin:0px; padding:0px; } .box{ width:600px; height:300px; overflow:hidden; margin:0 auto; } .nav{ width:1800px; height:300px; transition:2s; } .nav li{ list-style-type:none; float:left; height:300px; width:600px; } .nav li img{ height:300px; width:600px; display:block; } </style> </head> <body> <div id="Item"></div> <script type="text/babel"> var Imgd1 =React.createClass({ getInitialState: function () { return { marginLeft:0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var marginLeft = this.state.marginLeft; if(marginLeft==-1200){ marginLeft=600; } marginLeft -=600; this.setState({ marginLeft: marginLeft }); }.bind(this),2000); }, render:function(){ return ( <div className="box"> <ul className="nav" style={this.state}> <li><img src="img2.jpg" alt=""/></li> <li><img src="img3.jpg" alt=""/></li> <li><img src="img4.jpg" alt=""/></li> </ul> </div> ) } }); ReactDOM.render( <Imgd1/>, document.getElementById("Item") ) </script> </body></html>
添加回答
举报
0/150
提交
取消