js控制图片左右不间断滚动代码

码农公社  210.net.cn   210= 1024  10月24日一个重要的节日--码农(程序员)节

 今天给一个客户做网站,要求左右不间断滚动的,用Marquee 标签做出来的效果会留白,显得不是很美观。从互联网上搜集了一段不错的js控制的图片左右不间断滚动代码,可以用来做美化用。

1,滚动的内容页面,可以用文字也可以用图片等网页信息内容

<TABLE cellSpacing=0 cellPadding=0 width=97% align=center border=0>
<TBODY>
<TR>
<TD align="center">
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 97%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top><table width="97%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/gd01.jpg"></td>
<td><img src="images/gd02.jpg"></td>
<td><img src="images/gd03.jpg"></td>
<td><img src="images/gd04.jpg"></td>
<td><img src="images/gd05.jpg"></td>
<td><img src="images/gd06.jpg"></td>
<td><img src="images/gd07.jpg"></td>
<td><img src="images/gd08.jpg"></td>
<td><img src="images/gd09.jpg"></td>
<td><img src="/template/fengyun/images/gd10.jpg"></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>

2,调用的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)}

评论

  1. #1

    大萝卜(2019-12-19 14:17:49)
    小萝卜头,大地瓜。