不间断无缝滚动代码(横向、…

相当简洁 使用也方便

原文地址：不间断无缝滚动代码(横向、竖向) 作者：鑫人

一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆副本，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到"无缝"滚动的目的。

向上滚动：
<div id=demo style=overflow:hidden;height:100;width:90;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function Marquee(){
//当滚动至demo1与demo2交界时
if(demo2.offsetTop-demo.scrollTop<=0)   
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
demo.οnmοuseοver=function() {clearInterval(MyMar)}
//鼠标移开时重设定时器
demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}
</script>

向下滚动：
<div id=demo style=overflow:hidden;height:100;width:90;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
<img src="logo.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

向左滚动：
<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
         <td><img src="logo.gif" width="88"></td>
<td><img src="logo.gif" width="88"></td>
         <td><img src="logo.gif" width="88"></td>
         <td><img src="logo.gif" width="88"></td>
<td><img src="logo.gif" width="88"></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度数值越大速度越慢
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

向右滚动：
<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
         <td><img src="logo.gif" width="88"></td>
<td><img src="logo.gif" width="88"></td>
         <td><img src="logo.gif" width="88"></td>
         <td><img src="logo.gif" width="88"></td>
<td><img src="logo.gif" width="88"></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

 

还有一种常用的div方法的
<div id="demo" style="overflow:hidden;height:100px;">
<div id="demo1" style="line-height:150%">
<img src='logo/(1).jpg' width=100 height=42 border=0 />
<img src='logo/(2).jpg' width=100 height=53 border=0 />
<img src='logo/(3).jpg' width=100 height=73 border=0 />
<img src='logo/(7).jpg' width=100 height=44 border=0 />
<img src='logo/(4).JPG' width=100 height=98 border=0 />
<img src='logo/(5).jpg' width=100 height=45 border=0 />
<img src='logo/(6).jpg' width=100 height=101 border=0 />
<img src='logo/(8).jpg' width=100 height=95 border=0 />
<img src='logo/(9).jpg' width=100 height=42 border=0 />
<img src='logo/(10).jpg' width=100 height=127 border=0 />
<img src='logo/(11).jpg' width=100 height=25 border=0 />
<img src='logo/(12).jpg' width=100 height=27 border=0 />
<img src='logo/(13).jpg' width=100 height=99 border=0 />
<img src='logo/(9).jpg' width=100 height=42 border=0 />
<img src='logo/(14).jpg' width=100 height=84 border=0 />
<img src='logo/(15).jpg' width=100 height=97 border=0 />
<img src='logo/(16).jpg' width=100 height=102 border=0 /></div>

<div id="demo2"></div>
</div>
<script>
var speed=40;
var demo2=document.getElementByIdx("demo2");
var demo1=document.getElementByIdx("demo1");
var demo=document.getElementByIdx("demo");
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>