<!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=utf-8" />
<title>JavaScript代码实现图片循环滚动效果</title>
<style type="text/css">
.list{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="demo" style=" overflow: hidden; width: 1308px; height: 166px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="marquePic1"> <!--align="right" 水平右对齐 valign="top" 垂直上对齐 -->
<!-- 要循环滚动的图片 -->
<table width="1308" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center">
<td> <img class="list" src="../../千图网图片/_NRQkwv-I.jpg" border="1" /> </td>
<td> <img class="list" src="../../千图网图片/0df431adcbef76096709930527dda3cc7cd99e2d.jpg" border="1" /> </td>
<td> <img class="list" src="../../千图网图片/1.png" border="1" /> </td>
<td> <img class="list" src="../../千图网图片/2.png" border="1" /> </td>
<td> <img class="list" src="../../千图网图片/3.png" border="1" /> </td>
<td> <img class="list" src="../../千图网图片/4.png" border="1" /> </td>
<td> <img class="list" src="../../千图网图片/5.png" border="1" /> </td>
<td> <img class="list" src="../../千图网图片/6.png" border="1" /> </td>
</tr>
</table>
</td>
<td id="marquePic2" width="1"></td>
</tr>
</table>
</div>
</body>
<script language="javascript">
var speed = 30 ; //设置间隔时间
marquePic2.innerHTML = marquePic1.innerHTML;
var demo = document.getElementById("demo"); //获取demo对象
function Marquee(n){ //实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft = 0;
}else{
demo.scrollLeft = demo.scrollLeft+n;
}
}
var MyMar = setInterval("Marquee(5)",speed);
demo.onmouseover = function() { //停止滚动
clearInterval(MyMar);
}
demo.onmouseout = function() { //继续滚动
MyMar = setInterval("Marquee(5)",speed);
}
</script>
</html>
参数说明：
1. function：要调用的JavaScript自定义函数名称。
2. Milliseconds：设置超时时间（以毫秒为单位）。
功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。