js基础教程四之无缝滚动

前面学习了相关js的一些基础知识，这节主要针对定时器作综合运用：

无缝滚动-基础

效果演示：

*物体运动基础

*让div移动起来

*offsetLeft的作用

*用定时器让物体连续移动

<style type="text/css">
#div1{ 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{ 100px; height:100px; background:#CCC; margin-top:10px; position:absolute; left:0px;}
.roll{ 400px; height:120px; margin:50px auto 0; position:relative;} 
img{ 100px; height:100px; border:#FC9 1px solid;}
.btnLeft { display:block; 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; 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 { 400px; height:120px; margin:0 auto; position:relative; overflow:hidden;}
ul{ list-style-type:none; position:absolute;}
li{ float:left; 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;的参数，这里只有鼠标移入移出事件，类似效果图：