Question

js 无缝滚动只滚动一次

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

这个向上无限滚动的效果不知为什么，只滚一点不滚动了，好像是因为给图片设了高度的原因，证明会这样呢，谁能给我讲一下，还有这个高度该怎么设置才能让他看起来时连贯的在滚动的，很多时候他这个滚动在意次结束后图片会一下子跳一大段过程

Answer 1

应该是图片高度或宽度不够，不知道你是左右滚动还是上下滚动。你多放几张图片，这个原理是必须图片加在一起的高度或宽度（看上下滚动还是左右滚动而定）必须大于div的高度或者宽度，他就能连续不断的滚动了

Answer 2

将代码中的这段代码
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
改成
function Marquee(){
demo.scrollTop++
}
就可以实现只滚动一次的效果（到达底部的时候不再滚动）