Question

图片循环滚动 无缝滚动 用JS

一个DIV 图片无缝滚动

Answer 1

经典的无缝滚动代码! <div id=demo style="overflow:hidden;width:750;" align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr><td valign=top bgcolor=ffffff id=marquePic1>
<table width='100%' border='0' cellspacing='0'><tr><td align=center><a href='#'><img src=" http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>01</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>02</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>03</a></td><td align=center><a href='#'><img src=" http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>04</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>05</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>06</a></td><td align=center><a href='#'><img src=" http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>07</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>08</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>09</a></td></tr></table>
</td><td id=marquePic2 valign=top></td></tr>
</table></div>
<script type="text/javascript">
var speed=50
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

Answer 2

<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on"></SPAN></MARQUEE>
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;" onmouseover="aa()" onmouseout="b()" >
[CROSSSELLING3]
[CROSSSELLING4]
[CROSSSELLING5]
[CROSSSELLING6]
[CROSSSELLING7]
[CROSSSELLING8]
[CROSSSELLING9]
[CROSSSELLING10]</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;
}
var a = setInterval("scroll(document.getElementById('scrollobj'))",20);
function aa(){
clearInterval(a);
}
function b(){
a=setInterval("scroll(document.getElementById('scrollobj'))",10);
}
//-->
</script>