图片首尾无缝相接滚动的

[lingli069]

怎么用JavaScript实现一串图片首尾无缝相接滚动的？

[luoyinshuang]

如果滚动图片没有特殊要求，用下面的方法已经可以了。

document.write("<marquee behavior=scroll direction=left width=578 height=90 scrollamount=1 scrolldelay=1 onmouseover='this.stop()' onmouseout='this.start()'>");


document.write('<a href="xxdldh/01.gif"><img border="0" src="xxdldh/01-1.gif" width="180" height="90">');
document.write('<a href="xxdldh/02.gif"><img border="0" src="xxdldh/02-2.gif" width="180" height="90">');
document.write('<a href="xxdldh/03.gif"><img border="0" src="xxdldh/03-3.gif" width="180" height="90">');
document.write('<a href="xxdldh/04.gif"><img border="0" src="xxdldh/04-4.gif" width="180" height="90">');
document.write('<a href="xxdldh/05.gif"><img border="0" src="xxdldh/05-5.gif" width="180" height="90">');
document.write('<a href="xxdldh/06.gif"><img border="0" src="xxdldh/06-6.gif" width="180" height="90">');
document.write('<a href="xxdldh/07.gif"><img border="0" src="xxdldh/07-7.gif" width="180" height="90">');
document.write('<a href="xxdldh/08.gif"><img border="0" src="xxdldh/08-8.gif" width="180" height="90">');
document.write('<a href="xxdldh/09.gif"><img border="0" src="xxdldh/09-9.gif" width="180" height="90">');
document.write('<a href="xxdldh/10.gif"><img border="0" src="xxdldh/10-10.gif" width="180" height="90">');

document.write('<a href="xxdldh/12.gif"><img border="0" src="xxdldh/12-12.gif" width="180" height="90">');
document.write('<a href="xxdldh/13.gif"><img border="0" src="xxdldh/13-13.gif" width="180" height="90">');


document.write("</marquee>");



如果是图片路径需要从数据库读取，或数量不定，或有更复杂的要求，这个就要结合后台代码来写了。

[waaoo]

<DIV id=demo style="overflow:hidden;height :200px;width :95px;background-color:white;color:#ffffff;
border-width :1px 1px 1px 1px;border-style :dotted dotted dotted dotted;border-color :black black black black;" align=center>
<DIV id=demo1>
<!-- 定义图片 -->
<IMG src=http://www.pc354.com/images/logo.gif>
<IMG src=http://www.pc354.com/images/logo.gif>
<IMG src=http://www.pc354.com/images/logo.gif>
<IMG src=http://www.pc354.com/images/logo.gif>
<IMG src=http://www.pc354.com/images/logo.gif>
<IMG src=http://www.pc354.com/images/logo.gif>
<IMG src=http://www.pc354.com/images/logo.gif>
<IMG src=http://www.pc354.com/images/logo.gif>
</DIV>
<DIV id=demo2></DIV>
</DIV>

<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>

[scscms太阳光]

二楼的就可以,如果你还想要高级点的就可以考虑用JS插件MSClass.js