中科新闻网南小鸟 英文:marquee 中如何让图片进行无缝循环？
来源：百度文库 编辑：中科新闻网 时间：2024/05/05 02:17:32
思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft太到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动.
有个代码例子:
<html>
<body>
<div id=demo style=overflow:hidden;height:95;width:500;>
<table align=center cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><a href='http://www.lijinran.com' target='_blank' title='网站名称：劲然的眼镜
网站地址：http://www.lijinran.com
网站简介：劲然漫画'><img src='http://www.lijinran.com/bbs/UploadFile/20047111344528837.gif' width='88' height='31' border='0'></a><a href='http://my.coolala.net' target='_blank' title='网站名称：酷辣辣
网站地址：http://my.coolala.net
网站简介：酷辣辣更精彩'><img src='http://my.coolala.net/images/logo8831.gif' width='88' height='31' border='0'></a><a href='http://www.brazilfans.cn' target='_blank' title='网站名称：巴迷社区
网站地址：http://www.brazilfans.cn
网站简介：巴迷社区'><img src='http://www.brazilfans.cn/news/images/link/logo.gif' width='88' height='31' border='0'></a><a href='/FriendSite/FriendSiteReg.asp' target='_blank'><img src='/images/nologo.gif' width='88' height='31' border='0' alt='点击申请'></a><a href='/FriendSite/FriendSiteReg.asp' target='_blank'><img src='/images/nologo.gif' width='88' height='31' border='0' alt='点击申请'></a><a href='/FriendSite/FriendSiteReg.asp' target='_blank'><img src='/images/nologo.gif' width='88' height='31' border='0' alt='点击申请'></a></td>
<td id=demo2 valign=top></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.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>