<!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>
左右輪播時為什么圖片會抖動
慕設(shè)計7639819
2016-11-05 17:10:26
