首先說下實現內容滾動效果的思路：在一塊區域內實現內容滾動效果，要求內容輪播，那麼如何實現輪播呢？我們將原內容複製一份放置其後面，當原內容滾動完成（即父層scrollTop等於原內容區高度時），我們將父層scrollTop設定為0，此時又從原內容開始滾動。如果瀏覽者想看內容時，但內容一直再滾動怎麼辦呢？我們可以通過設定onmouseover事件來控制，當用戶把滑鼠懸停至內容區時，停止滾動；當滑鼠移開時，繼續滾動。

以下是程式碼部分：

html程式碼：
<div class="scroll" id="scroll">
        <div id="inner1">
            <p
 
>1好好學習天天向上!</p>
            <p>2好好學習天天向上!</p>
            <p>3好好學習天天向上!</p>
            <p>4好好學習天天向上!</p>
            <p>5好好學習天天向上!</p>
            <p>6好好學習天天向上!</p>
            <p>7好好學習天天向上!</p>
            <p>8好好學習天天向上!</p
 
>
        </div>
        <div id="inner2"></div>
    </div>

css樣式：
        ul,li,p{margin:0;padding:0;list-style: none}
        body{padding:20px;}
        .scroll{
            line-height:28px;
            border:2px dashed #666;
            padding:0 20px;
            height:112
 
px;
            overflow:hidden;
            background-color:#f1f1f1;
        }

js程式碼：
function srcoll(){
        var _scroll = document.getElementById("scroll"),
            _inner1 = document.getElementById("inner1"),
            _inner2 = document.getElementById("inner2"),
            speed = 20;
        _inner2.innerHTML = _inner1.innerHTML;
        function marquee(){
            if(_inner1.offsetHeight<=_scroll.scrollTop){
                _scroll.scrollTop = 0
            }else{
                _scroll.scrollTop++;
            }
        }
        var interval = setInterval(marquee,speed);
        _scroll.onmouseover = function(){
            clearInterval(interval);
        }
        _scroll.onmouseout = function(){
            interval = setInterval(marquee,speed);
        }
    }
    srcoll()