無縫滾動原生JS 版

* {
    margin: 0;
    padding: 0;
}
#box{
    width: 300px;
    height: 120px;
    border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
}
.con {
    height: 120px;
    overflow: hidden; // 這句話至關重要--只有hidden后，才能滾動，子元素要高度 > 包裹元素
}
ul {
    position: relative;
    height: 240px;
    list-style: none;
}
li {
    height: 24px;
    line-height: 24px;
    width: 100%;
    background-color: tomato;
}
li:nth-child(odd) {
    background-color: #ccc;
}

<!-- 這個結構必須 是改變第二層 div的 scrollTop==卷去的是內容部分 -->
<div id="box">
    <div id="container" class="con">
        <ul id="wrap">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
</div>

js 部分

<script>
    var timer = null;
    var speed = 60;

    var wrap = document.getElementById("wrap");
    var container = document.getElementById("container");
    var box = document.getElementById("box");
    var height = container.offsetHeight;

    wrap.innerHTML += wrap.innerHTML;

    function auto() {
        if(container.scrollTop >= height){
            container.scrollTop = 0;
        }else{
            container.scrollTop++;
        }
    }
    timer = setInterval("auto()",speed);

    box.onmouseover = function (){
        clearInterval(timer);
    };
    box.onmouseout = function (){
        timer = setInterval("auto()",speed);
    };

</script>

無縫滾動 jquery 版

<script>
    var timer = null;
    var speed = 60;
    var html = $("#wrap").html();
    var container = $("#container");
    var index = 0;
    $("#wrap").html(html+html);
    var height = $("#wrap").height()/2;

    function auto() {
        if(container.scrollTop() >= height){
            index = 0;
            container.scrollTop(index);
        }else{
            container.scrollTop(index++);
        }
    }

    timer = setInterval("auto()",speed);

    $("#box").hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval("auto()",speed);
    })
</script>

無縫向左滾動

* {
    margin: 0;
    padding: 0;
}
#box{
    width: 275px;
    height: 120px;
    border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
}
.con {
    height: 120px;
    overflow: hidden; 
/*必須要-對于整個網頁是不需要就會有滾動條，
而對于其他元素必須手動設置overflow:hidden,才能設置scrollTop,scollLeft 屬性*/
}
ul {
    position: relative;
    list-style: none;
    font-size: 0;
}
li {
    display: inline-block;
    padding: 0 10px;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    background-color: tomato;
}
li:nth-child(odd) {
    background-color: #ccc;
}

js 部分

<script>
    var timer = null;
    var speed = 1000/40;
    var html = $("#wrap").html();
    var container = $("#container");
    $("#wrap").html(html+html);
    var len = $("#wrap").children('li').length;
    // innerWidth() 是包含內邊距的 不包括邊框
    var width = $("#wrap").children('li').eq(0).innerWidth();

    var index = 0;
    
    $("#wrap").width(len*width);

    function auto() {
        if(container.scrollLeft() >= $("#wrap").width()/2){
            index = 0;
            container.scrollLeft(index);
        }else{
            container.scrollLeft(index++);
        }
    }

    timer = setInterval("auto()",speed);

    /*$("#box").hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval("auto()",speed);
    })*/
</script>

間歇性滾動 與 上面無縫滾動 html結構一樣

<script>
    var speed = 60;
    var delay = 2000;

    var wrap = document.getElementById("wrap");
    var container = document.getElementById("container");
    var box = document.getElementById("box");
    var iHeight = 24*2;
    var time;

    wrap.innerHTML += wrap.innerHTML;
    container.scrollTop = 0;

    function move(){
        container.scrollTop++;
        time = setInterval("auto()",speed);
    }

    function auto() {
        if(container.scrollTop % iHeight == 0){
            clearInterval(time);
            setTimeout("move()",delay);
        }else{
            container.scrollTop++;
            if(container.scrollTop >= container.scrollHeight/2){
                container.scrollTop = 0;
            }
        }
    }
    
    var timer =  setTimeout("move()",0);
  // 這個移入停止還沒實現

</script>