div+js实现首尾相连循环滚动效果

来源：互联网发布：ubuntu 14.04 jdk 编辑：程序博客网时间：2024/04/29 04:12
<!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> <TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE> </HEAD> <BODY> 用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br /><br /> <DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:955px;"><span><a href="http://www.yicas.cn/dct/page/65651"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=687" /></strong></a><a href="http://www.yicas.cn/dct/page/65607"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=603" /></strong></a><a href="http://www.yicas.cn/dct/page/65744"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=779" /></strong></a><a href="http://www.yicas.cn/dct/page/65913"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=903" /></strong></a><a href="http://www.yicas.cn/dct/page/65743"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=777" /></strong></a><a href="http://www.yicas.cn/dct/page/65606"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=599" /></strong></a><a href="http://www.yicas.cn/dct/page/66148"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=1141" /></strong></a><a href="http://www.yicas.cn/dct/page/66154"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=1147" /></strong></a><a href="http://www.yicas.cn/dct/page/65624"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=662" /></strong></a><a href="http://www.yicas.cn/dct/page/66034"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=1029" /></strong></a><a href="http://www.yicas.cn/dct/page/66050"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=1045" /></strong></a></span></DIV> <script language="javascript" type="text/javascript"> <!-- function scroll(obj) { var tmp = (obj.scrollLeft)++; //当滚动条到达右边顶端时 if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML; //当滚动条滚动了初始内容的宽度时滚动条回到最左端 (此处可以根据需要选择是否注释)//if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0; } setInterval("scroll(document.getElementById('scrollobj'))",20); //--> </script> </BODY> </HTML>
原文链接：http://www.jb51.net/article/28358.htm