上一篇
下一篇
不间断图片左右滚动代码
作者:journey 日期:2009-05-29
DEMO页面：
程序代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="咖啡杯里游泳 http://www.itweb2.com/" />
<meta name="description" content="" />
<meta content="" name="keywords" />
<title>不间断图片左右滚动代码演示</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>
<BODY>
<CENTER>
<TABLE style="BORDER: #ccc 1px solid;" cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
<TD>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">
<p>2</p>
</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>
</tr>
</table></TD>
<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<script language=JavaScript src="js/scrollpic.js"></script>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY>
</HTML>
JS代码：
程序代码
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
程序代码<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="咖啡杯里游泳 http://www.itweb2.com/" />
<meta name="description" content="" />
<meta content="" name="keywords" />
<title>不间断图片左右滚动代码演示</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>
<BODY>
<CENTER>
<TABLE style="BORDER: #ccc 1px solid;" cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
<TD>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">
<p>2</p>
</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>
</tr>
</table></TD>
<TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<script language=JavaScript src="js/scrollpic.js"></script>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY>
</HTML>
JS代码：
程序代码var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论