javascript实现无缝滚动原理（上下滚动）

 

<div id="demo" style="overflow:hidden;height:200px;width:170px;background:#214984;color:#ffffff">
    <div id="demo1">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
        <img src="http://www.html5cn.org/temp/logo_b1.png">
    </div>
    <div id="demo2"></div>
</div>
<script>
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    var speed = 30;
    demo2.innerHTML = demo1.innerHTML //克隆demo1为demo2
　　function Marquee() {
        if (demo.scrollTop - demo1.scrollHeight <= 0){ //当滚动条向下滚动的距离小于等于demo1滚动的高度时;
　　　　　　  demo.scrollTop++; //滚动条滚动加1
　　　　　}else { //当滚动体滚动的距离等于demo1的滚动高度时;
            demo.scrollTop = 0; //滚动条回到最顶端
        }
    }
    var MyMar = setInterval(Marquee, speed) //设置定时器
    demo.onmouseover = function () {
            clearInterval(MyMar)
    } //鼠标移上时清除定时器达到滚动停止的目的
    demo.onmouseout = function () {
            MyMar = setInterval(Marquee, speed)
    } //鼠标移开时重设定时器
</script>