左右轮播时为什么图片会抖动
<!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>
慕设计76398191回答
-
慕田峪3555374
这是因为轮播图片的速率超过了setinterval的时间间隔
随时随地看视频慕课网APP
JavaScript
React.JS