left和offsetLeft在js应用中的区别？
最近写了个无缝轮播图，发现在一个if判断中offsetleft和style.left的运行效果不一样，但重新写了个一模一样原理的样本，两者的效果又一样，真的不知道问题出在哪里，请大家指教一下。
代码如下：
<!DOCTYPE html><head> <style> body,p,i{ margin:0; padding: 0; color:gray; } i{font-style:normal;display: inline-block;vertical-align: top;} input[type=range]{ margin-left:10px; } .mainbox{ width: 500px; margin:0 auto; } .bannerBox{ width: 100%; height: 200px; position: relative; overflow: hidden; } .banner{ left:0px; width: 500%; height: 200px; position: absolute; transition:left .5s; } .banner span{ width:500px; height:200px; float: left; display: block; text-align: center; line-height: 200px; font-size: 100px; border: 1px solid gray; box-sizing:border-box; color:gray; } .controller{ width: 100%; height: 60px; } .controller span{ width:50%; height:30px; padding-left: 3px; float: left; line-height: 30px; box-sizing:border-box; font-size: 10px; } .controller span p{ float: left; } </style></head><body><!--样本 <div style="width:100px;height:100px;background:blue;position:absolute;left:500px;"></div> <div style="width:100px;height:100px;background:red;position:absolute;left:500px;top:100px;"></div> <script> var e=document.getElementsByTagName("DIV")[0]; var e1=document.getElementsByTagName("DIV")[1];var time1=setInterval(function(){ console.log(e.style.left+"--"+e.offsetLeft); if(e.offsetLeft>-100){e.style.left=e.offsetLeft-100+"px" if(e.offsetLeft<=100){ setTimeout(function(){ e.style.left=500+"px"; },500); }} else{e.style.left=500+"px";} },2000);var time2=setInterval(function(){ console.log(e1.style.left+"-000-"+e1.offsetLeft); if(parseInt(e1.style.left)>-100){e1.style.left=e1.offsetLeft-100+"px" if(parseInt(e1.style.left)<=100){ setTimeout(function(){ e1.style.left=500+"px"; },500); }} else{e1.style.left=500+"px";} },2000);</script>--><div class="mainbox"> <div class="bannerBox" id="bBox"> <div class="banner" id="bLoop"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>1</span> <dl> <dd><a href="#"/></dd> <dd><a href="#"/></dd> <dd><a href="#"/></dd> <dd><a href="#"/></dd> <dd><a href="#"/></dd> </dl> </div> </div> <div class="controller"> <span> <p>WIDTH:</p> <input id="bWidth" type="range" min="100" max="500" value="500"/> <i id="widthValue">500</i> </span> <span> <p>HEIGHT:</p> <input id="bHeight" type="range" min="100" max="400" alue="400"/> <i id="heightValue">400</i> </span> <span> <p>INTERVAL:</p> <input id="bInterval" type="range" min="100" max="2000" value="2000"/> <i id="interValue">2000</i> </span> <span> <input type="file" multiple="multiple"/> </span> </div> </div><script type="text/javascript">var loop=document.getElementById("bLoop");var time1=setInterval(bannerAni,2000);function bannerAni(){ if(parseInt(loop.style.left)>-2000){ loop.style.transition=".5s"; loop.style.left=loop.offsetLeft+-500+"px"; if(parseInt(loop.style.left)<=-2000){ setTimeout(function(){ //提前触发动画 loop.style.left=0+"px"; loop.style.transition="0s"; },1000)} } else{ loop.style.left=0+"px"; loop.style.transition="0s"; }}function bannerLoop(){ loop.style.left="0px"; var te=document.getElementById("bBox"); te.onmouseover=function(){ clearInterval(time1); console.log("clear"); } te.onmouseout=function(){ time1=setInterval(bannerAni,2000); console.log("reset"); }}function getRangeValue(rangeId){ rangeId.addEventListener("change", function(){ rangeId.nextSibling.nextSibling.innerHTML=rangeId.value; },false);}getRangeValue(bInterval);getRangeValue(bHeight);getRangeValue(bWidth);bannerLoop();</script></body></html>被注释掉的是样本，大家把下面的parseInt(loop.style.left)换成loop.style,left后
原本应该无缝连接的轮播图在最后一张图时出现了停顿，而不是提前调用那个一次性定时器。
效果大家运行一下就知道区别了。
function bannerAni(){
if(parseInt(loop.style.left)>-2000){
loop.style.transition=".5s";
loop.style.left=loop.offsetLeft+-500+"px";
if(parseInt(loop.style.left)<=-2000){
setTimeout(function(){ //提前触发动画
loop.style.left=0+"px";
loop.style.transition="0s";
},1000)}
}
else{
loop.style.left=0+"px";
loop.style.transition="0s";
}
}
我的问题就是为什么两者的值都一模一样，但最后出来的效果却不同，真不得其解。
宝慕林8188532浏览 731回答 1
1回答
-
宝慕林8188532
第一次提问，真格式怎么那么乱？?总之上面那大段就是整个页面的代码了。
随时随地看视频慕课网APP
相关分类
Html5
JavaScript