<!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>Untitled document</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;">Moving means that the entire div is moving, so the position of the div should be set to relative, and the ul should remain fixed within the div, so the position is set to 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 Seamless scrolling and offset...
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=324802636&siteId=291194637
Recommended
Ranking