定时器应用———无缝滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
div{width:680px;height:132px;border:1px gray solid;margin:130px auto; position:relative;overflow:hidden;}

ul1{position:absolute;left:0;}

ul li{list-style:none;float:left;width:150px;height:112px;padding:10px; }
ul li img{width:150px;height:112px;}
</style>
</head>

<body>
<script>
window.onload=function(){
var oDiv=document.getElementById(‘box’);
var oUl=document.getElementById(‘ul1’);
var aLi=document.getElementsByTagName(‘li’);
var timer=null;

oUl.innerHTML += oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length + 'px';    

timer=setInterval(function(){
 if(oUl.offsetLeft < -oUl.offsetWidth/2){
    oUl.style.left=0;
    };
     oUl.style.left=oUl.offsetLeft - 1 + 'px';  

    },10)

}    

</script>
<div id="box">
<ul id="ul1">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
<li><img src="5.jpg" /></li>
<li><img src="6.jpg" /></li>
<li><img src="7.jpg" /></li>
<li><img src="8.jpg" /></li>
<li><img src="9.jpg" /></li>
</ul>
</div>
</body>
</html>

» 本文来自:前端开发者 » 《定时器应用———无缝滚动》
» 本文链接地址:https://www.rokub.com/9291.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!