javascript图片滚动效果
<!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>javascript图片滚动效果</title>
</head>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript图片滚动效果</title>
</head>
<body >
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<td align="right" valign="top"><table width="93%" border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td width="100%" height="140">
<table border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td><div id="demo" style="HEIGHT: 118px; OVERFLOW: hidden; WIDTH:720px" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="demo1"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="3"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj1.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj2.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj3.jpg" width="130" height="110" border="0"/></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj4.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj5.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj11.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj12.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj13.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj14.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj15.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
</tr>
</table></td>
<td align="center" id="demo2"></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo. {clearInterval(MyMar)}
demo. {MyMar=setInterval(Marquee,speed)}
</script></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<td align="right" valign="top"><table width="93%" border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td width="100%" height="140">
<table border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td><div id="demo" style="HEIGHT: 118px; OVERFLOW: hidden; WIDTH:720px" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="demo1"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="3"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj1.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj2.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj3.jpg" width="130" height="110" border="0"/></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj4.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj5.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj11.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj12.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj13.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj14.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
<td width="5"> </td>
<td><table border="1" cellpadding="0" cellspacing="0" bgcolor="#cccccc">
<tr>
<td bgcolor="#FFFFFF" align="center"><img src=" http://www.qmcrystal.com/images/sj15.jpg" width="130" height="110" border="0" /></td>
</tr>
</table></td>
</tr>
</table></td>
<td align="center" id="demo2"></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo. {clearInterval(MyMar)}
demo. {MyMar=setInterval(Marquee,speed)}
</script></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
</body>
</html>