首页 > 代码库 > js基础教程四之无缝滚动
js基础教程四之无缝滚动
前面学习了相关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="http://www.mamicode.com/向左移动" /><input id="stopp" type="button" value="http://www.mamicode.com/停止移动" /><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="http://www.mamicode.com/pic/1.jpg" /> </li> <li> <img src="http://www.mamicode.com/pic/2.jpg" /> </li> <li> <img src="http://www.mamicode.com/pic/3.jpg" /> </li> <li> <img src="http://www.mamicode.com/pic/4.jpg" /> </li> <li> <img src="http://www.mamicode.com/pic/1.jpg" /> </li> <li> <img src="http://www.mamicode.com/pic/2.jpg" /> </li> <li> <img src="http://www.mamicode.com/pic/3.jpg" /> </li> <li> <img src="http://www.mamicode.com/pic/4.jpg" /> </li></ul></div></div>
向左向右的功能还有待完善，只需改变isSpeed=5;的参数，这里只有鼠标移入移出事件，类似效果图：
js基础教程四之无缝滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。