运行看看

向上不间断滚动代码：

<div id=demoUp style="overflow:hidden; width:128px; height:200px;">
 <div id=demoUp1>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 </div>
 <div id=demoUp2></div>
 </div>
 <script language="javascript">
 var speedUp=30
 demoUp2.innerHTML=demoUp1.innerHTML
 function MarqueeUp(){
 if(demoUp2.offsetTop-demoUp.scrollTop<=0)
 demoUp.scrollTop-=demoUp1.offsetHeight
 else{
 demoUp.scrollTop++
 }
 }
 var MyMarUp=setInterval(MarqueeUp,speedUp)
 demoUp.onmouseover=function() {clearInterval(MyMarUp)}
 demoUp.onmouseout=function() {MyMarUp=setInterval(MarqueeUp,speedUp)}
 </script>

向下不间断滚动代码：

<div id=demoDown style="overflow:hidden; width:128px; height:200px;">
 <div id=demoDown1>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 <img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><br>
 </div>
 <div id=demoDown2></div>
 </div>
 <script language="javascript">
 var speedDown=30
 demoDown2.innerHTML=demoDown1.innerHTML
 demoDown.scrollTop=demoDown.scrollHeight
 function MarqueeDown(){
 if(demoDown1.offsetTop-demoDown.scrollTop>=0)
 demoDown.scrollTop+=demoDown2.offsetHeight
 else{
 demoDown.scrollTop--
 }
 }
 var MyMarDown=setInterval(MarqueeDown,speedDown)
 demoDown.onmouseover=function() {clearInterval(MyMarDown)}
 demoDown.onmouseout=function() {MyMarDown=setInterval(MarqueeDown,speedDown)}
 </script>

向左不间断滚动代码：

<DIV id=demoleft style="OVERFLOW: hidden; WIDTH: 700px; COLOR: #ffffff">
 <TABLE border=0 cellPadding=0 cellSpacing=0 cellspace="0">
 <TBODY>
 <TR>
 <TD id=demo1left vAlign=top align=middle>
 <TABLE cellSpacing=0 cellPadding=2 border=0>
 <TBODY>
 <TR align=middle>
 <TD><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png" width="100" height="89" /></TD>
 <TD><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png" width="100" height="89" /></TD>
 <TD><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png" width="100" height="89" /></TD>
 <TD><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png" width="100" height="89" /></TD>
 <TD><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png" width="100" height="89" /></TD>
 <TD><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png" width="100" height="89" /></TD>
 <TD><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png" width="100" height="89" /></TD>
 </TR></TBODY></TABLE></TD>
 <TD id=demo2left vAlign=top></TD></TR></TBODY></TABLE></DIV>
 <SCRIPT>
 var speed=20//速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
 demo2left.innerHTML=demo1left.innerHTML
 function Marquee(){
 if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其实demo.scrollLeft是有 最大值的，和demo0.width,引用的图片的width有关系。demo过了一半（每半内容一样的），重新开始循环
 demoleft.scrollLeft-=demo1left.offsetWidth
 else{
 demoleft.scrollLeft++//不断的增加，相当于父容器的滚动条不断是缩小；但由于OVERFLOW: hidden; （滚动条不可见）
 }
 }
 var MyMarleft=setInterval(Marquee,speed)
 demoleft.onmouseover=function() {clearInterval(MyMarleft)}
 demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}
 </SCRIPT>

向右不间断滚动代码：
 <base href="https://www.kesituo.com">
 <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left

cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><img

src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><img src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"><img

src="https://www.kesituo.com/public/static/blueh5b/picture/footer-logo.png"></td><td id=demo2 valign=top></td></tr></table></div>
 <script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
 function Marquee(){
 if(demo.scrollLeft<=0)
 demo.scrollLeft+=demo2.offsetWidth
 else{
 demo.scrollLeft--
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>

运行看看

相关文章：