JavaScript实现一个最基本的图片无缝横向滚动效果

来源：互联网发布：android 关闭移动数据编辑：程序博客网时间：2024/05/21 07:13

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延时提示框</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#div1{ width: 800px; height:110px; margin:100px auto; border:1px solid #666; position:relative; background-color:#666; overflow:hidden;}
#div1 ul{ position:absolute; left:0px; top:0px;}
#div1 ul li{ float:left; list-style:none; width:140px; height:150px;}
</style>
<script type="text/javascript">
function $(Id){
return document.getElementById(Id);
}

window.onload=function (){
var div1=$("div1");
var ul=document.getElementsByTagName("ul")[0];
var ali=document.getElementsByTagName("li");
ul.innerHTML+=ul.innerHTML;
ul.style.width=ali[0].offsetWidth*ali.length+"px";
setInterval(function(){
if(ul.offsetLeft<-ul.offsetWidth/4){
ul.style.left='0';
}
ul.style.left=ul.offsetLeft-2+"px";

},30);

}

</script>
</head>

<body>
<div id="div1">
<ul>
<li><img src="div横向运动/image/1.jpg"></li>
<li><img src="div横向运动/image/2.jpg"></li>
<li><img src="div横向运动/image/3.jpg"></li>
<li><img src="div横向运动/image/4.jpg"></li>

</ul>
</div>

</body>