<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#div1{position:relative; left:45px; top:100px; width:950px; height:125px; overflow:hidden;}
#div1 ul{position:absolute; left:0; top:0;}
#div1 ul li{width:125px; height:125px; list-style:none; float:left;}
</style>
<script>
window.onload = function(){
var oDi1 = document.getElementById("div1");
var oUl = oDi1.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth*aLi.length + "px";
setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = "0";
}
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2 + "px";
}
oUl.style.left = oUl.offsetLeft+2 + "px";
},30);
}
</script>
</head>
<body>
<br/><br/><br/>
<div style="text-align:center;">移动是整个div在移动，所以div的position要设置为relative，而ul要在div内保持固定，所以posidion设置为absolute。
</div>
<div id="div1">
<ul>
<li><img src="img/01.jpg"/></li>
<li><img src="img/02.jpg"/></li>
<li><img src="img/03.jpg"/></li>
<li><img src="img/04.jpg"/></li>
<li><img src="img/05.jpg"/></li>
<li><img src="img/06.jpg"/></li>
<li><img src="img/07.jpg"/></li>
</ul>
</div>
</body>
</html>
020 无缝滚动与offset……
猜你喜欢
转载自blog.csdn.net/Chary_Simon/article/details/80051267
今日推荐
周排行