87,907
社区成员
发帖
与我相关
我的任务
分享各位大哥！求一段定时滚动的代码
假如页面中一行有五副图像1、2、3、4、5，希望每隔三秒，五副图像自动向前滚动，变成2、3、4、5、6，页面中还是有五副图像，这样的JS代码应该如何去写呢？希望各位大哥，帮帮菜鸟我！
...全文
请发表友善的回复…
发表回复
挨踢直男 2011-09-17
- 打赏
- 举报
<!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>
<title>Untitled Page</title>
<style>
img{ height:120px; width:110px; margin:0 5px;}
</style>
</head>
<body>
<div style="width: 600px; height: 120px; overflow: hidden" id="outer">
<div style="width: 1200px; height: 120px;" id="inner">
<div style="width: 600px; height: 120px; float:left;" id="imglist">
<img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
<img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
<img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
<img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
<img src="http://avatar.profile.csdn.net/2/E/1/2_armstrong005.jpg" style="float:left" />
</div>
</div>
</div>
</body>
<script type="text/javascript">
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
var imglist = document.getElementById("imglist");
inner.appendChild(imglist.cloneNode(true));
var timer
function timeout()
{
var count = 0;
var interval;
function move()
{
outer.scrollLeft += 5;
count += 5;
if(count>=120) window.clearInterval(interval);
}
interval = window.setInterval(move,10)
if(outer.scrollLeft >= imglist.offsetWidth) outer.scrollLeft = 0;
}
timer = window.setInterval(timeout,3000)
</script>
</html>
