標籤：
前面學習了相關js的一些基礎知識，這節主要針對定時器作綜合運用：
無縫滾動-基礎
效果示範：
*物體運動基礎
*讓div移動起來
*offsetLeft的作用
*用定時器讓物體連續移動
<style type="text/css">#div1{ width:100px; height:100px; background:#CCC; margin-top:10px; position:absolute; left:0px;}</style><script type="text/javascript">window.onload=function(){var begin = document.getElementById("begin");var stopp = document.getElementById("stopp");var div1 = document.getElementById("div1");var timer = null;begin.onclick = function(){ timer = setInterval(function(){ div1.style.left = div1.offsetLeft + 5 + "px"; },30); //alert(div1.offsetLeft); 返回0 ////在用offsetLeft時一定要在css裡設定其left，否則取到的將是Null值,還有相應的position};stopp.onclick = function(){ clearTimeout(timer);};};</script></head><body><input id="begin" type="button" value="向左移動" /><input id="stopp" type="button" value="停止移動" /><div id="div1"></div></body>
--效果原理
讓ul一直向左移動
複製li
a),innerHTML和 + ‘‘
b),修改ul的width
滾動過界後，重設位置
a).判斷過界
相關代碼：
<style type="text/css">#div1{ width:100px; height:100px; background:#CCC; margin-top:10px; position:absolute; left:0px;}.roll{ width:400px; height:120px; margin:50px auto 0; position:relative;} img{ width:100px; height:100px; border:#FC9 1px solid;}.btnLeft { display:block; width:30px; height:30px; background:url(pic/PagePre.png) no-repeat 12px 10px; position:absolute; top:50px; left:1px; z-index:1px; }.btnLeft:hover { background:url(pic/PagePre.png) no-repeat 12px 9px;}.btnRight{ display:block; width:30px; height:30px; background:url(pic/PageNext.png) no-repeat 1px 16px; position:absolute; top:50px; right: 0; z-index:1;}.btnRight:hover { background:url(pic/PageNext.png) no-repeat 1px 15px;}.warp { width:400px; height:120px; margin:0 auto; position:relative; overflow:hidden;}ul{ list-style-type:none; position:absolute;}li{ float:left; width:100px; height:100px; text-align:center;}</style><script type="text/javascript"> window.onload=function() {var oDiv= document.getElementById("roll");var oUI = document.getElementsByTagName("ul")[0];var oLi = document.getElementsByTagName("li");//var oLeft = document.getElementById("left"); 向左按鈕//var oRight = document.getElementById("right"); 向右按鈕var wapDiv = document.getElementById("wap");var timer = null;var isSpeed = -5; oUI.innerHTML += oUI.innerHTML; oUI.style.width = oLi[0].offsetWidth * oLi.length + "px"; //400 timer = setInterval(function margin(){ oUI.style.left = oUI.offsetLeft + isSpeed + "px"; if(oUI.offsetLeft < -oUI.offsetWidth/2){ oUI.style.left = ‘0px‘ ;}else if(oUI.offsetLeft > 0){ oUI.style.left = -oUI.offsetWidth /2;} },30);wapDiv.onmouseout = function() //滑鼠放上去{ timer = setInterval(function margin(){ oUI.style.left = oUI.offsetLeft + isSpeed + "px"; if(oUI.offsetLeft < -oUI.offsetWidth/2){ oUI.style.left = ‘0px‘ ;}else if(oUI.offsetLeft > 0){ oUI.style.left = -oUI.offsetWidth /2;} },30);};wapDiv.onmouseover = function() //滑鼠移走{clearTimeout(timer);};
<div class="roll" id="roll"><a href="javascript:void(0);" id="left" class="btnLeft"></a><a href="javascript:void(0);" id="right" class="btnRight"></a><div id="wap" class="warp"> <ul> <li> <img src="pic/1.jpg" /> </li> <li> <img src="pic/2.jpg" /> </li> <li> <img src="pic/3.jpg" /> </li> <li> <img src="pic/4.jpg" /> </li> <li> <img src="pic/1.jpg" /> </li> <li> <img src="pic/2.jpg" /> </li> <li> <img src="pic/3.jpg" /> </li> <li> <img src="pic/4.jpg" /> </li></ul></div></div>
向左向右的功能還有待完善，只需改變isSpeed=5;的參數，這裡只有滑鼠移入移出事件，類似：
js基礎教程四之無縫滾動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
