码迷,mamicode.com
首页 > 其他好文 > 详细

无缝滚动

时间:2015-01-28 23:47:20      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

<html>
<head>
<style>
*{margin:0px; padding:0px;}
#div1{position:relative; border:1px solid black; width:680px; height:132px; margin:10px auto; overflow:hidden;}
ul{ position:absolute;left:0px}
li {list-style:none; float:left; width:150px; height:112px; padding:10px;}
img{ width:150px; height:112px;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oDiv.getElementsByTagName("li");
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";这行如果不加的话,可能会导致折行,就会出现图片出现加载的状况。是因为ul宽带不够。
var ff=oUl.offsetWidth;
timer=setInterval(function()
{
if(oUl.offsetLeft<=-ff)
{
oUl.style.left=0;
}
else
{
oUl.style.left=oUl.offsetLeft-1+"px";
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
</div>
</body>
<html>

无缝滚动

标签:

原文地址:http://www.cnblogs.com/superglryj/p/4257372.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!