间歇式图片滚动 多浏览器兼容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.<html xmlns="http://www.
<head>
<style>
*{ margin:0; padding:0; font-size:13px; border:0; font:宋体,arial}
a{ text-decoration:none; color:#000}
li{ list-style-type:none}
.bottombox{ width:950px; height:140px; margin:0 auto; margin-top:20px}
#imgbox {width:940px;height:130px;background: #CCC; position:relative; overflow:hidden}
#img { display:block; width:1700px; position:absolute}
#img li{ display:block; float:left; width:220px; text-align:center}
#img img{ width:200px; height:130px;}
</style>
<script type="text/javascript">
/*
说明：此程序有别于网上各种图片滚动模式，代码不同，工作量小，兼容各版本浏览器，图片名任意，图片数量任意(如果太多，注意加大样式表#img中的width值)，
更改移动速度和步伐简便（调整speed space step 三个变量值即可），循环方式采用每次移动后将第0张图片移到最后面实现不间断循环，本例采用四张图片，
以便看清循环方式，实际运用中可用更多的图片。
新闻中心胡勇编制，2012年11月2日。
*/
var speed =2000;//间隔时间
var space = 1;//移动速度
var step =3;//移动的像素
var liwidth ;
var i = 0;
function liwidth(){
liwidth = document.getElementById("img").getElementsByTagName("li").item(0).scrollWidth ;//读取li宽度
}
setTimeout(liwidth,1);
function roll(){
function slide(){
document.getElementById("imgbox").scrollLeft = i;//图片盒子中的内容向左移动
i = i + step;
if(i >= liwidth){
i = 0;
clearInterval(timer);
var myul = document.getElementById("img");//获取id 为 “img” 的ul容器
var newli = document.createElement("li"); //创建一个新的li
myul.appendChild(newli); //在ul容器中的末尾添加一条新建的li
var li01 = myul.getElementsByTagName("li").item(0);//获取ul容器中的第0条li
newli.innerHTML = li01.innerHTML; //将第0条的li中的HTML代码赋给新创建的li
myul.style.display = "none" ;//由于下面的那两条（删除和回原位）执行后图像会有点闪动，所以先将图片隐藏
myul.removeChild(li01);//删除第0条li
document.getElementById("imgbox").scrollLeft = 0 ;
myul.style.display = "block" ;//再显示图片
timer = setTimeout(roll,speed);
}
}
timer = setInterval(slide,space);
}
function imgmouseover(){
clearInterval(timer);//鼠标触摸图片后移动停止
}
function imgmouseout(){
timer = setTimeout(roll,space);//鼠标离开图片后移动继续
}
timer = setTimeout(roll,space);//执行移动函数
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>间歇式图片滚动 超兼容性 胡勇编制</title>
</head>
<body>
<div class="bottombox">
<div id="imgbox" onmouseover="imgmouseover()" onmouseout="imgmouseout()">
<ul id="img">
<li><a href="#" target="_blank"><img src="images/an01.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="images/an02.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="images/an03.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="images/an04.jpg"/></a></li>
</ul>
</div>
</div>
</body>
</html>
程序代码：