在做廣東省互聯(lián)網(wǎng)協(xié)會官網(wǎng)時，產(chǎn)品經(jīng)理要求實現(xiàn)這樣一個需求：有一首會長寫的小詩，希望在首頁的一個區(qū)域內(nèi)，無限輪播這首詩。

輪播小詩

頁面結(jié)構(gòu)

               <div class="poem-Box"> 
                    <div class="poem-bg"></div>
                    <div id="poemCon" class="poemCon">
                        <div id="con1" class="con1">
                            <p>這里是五彩繽紛、群芳爭妍的世界！</p>
                            <p>這里是e光譜照、人潮似海的網(wǎng)絡(luò)愛好者的樂園！</p>
                            <p>一切網(wǎng)絡(luò)經(jīng)濟的困惑將在這里煙消云散，豁然開朗；</p>
                            <p>一切陳舊的企業(yè)經(jīng)營觀念將在這里被網(wǎng)絡(luò)新潮濯滌殆盡。</p>
                            <p>應(yīng)該摒棄的，從此摒棄！</p>
                            <p>早該到來的，正在到來！</p>
                            <p>在這"科技無限、網(wǎng)絡(luò)無界"的時空中遨游：</p>
                            <p>你將認(rèn)知和被認(rèn)知，你將熟識和被熟識。</p>
                            <p>她是Internet精英翱翔之天宇，</p>
                            <p>是網(wǎng)絡(luò)新人摘桂之階梯；</p>
                            <p>她不僅打上了千百萬網(wǎng)民悠纏之情結(jié)，</p>
                            <p>她更為商海卓識者醞釀著無限商機！</p>
                        </div>

                        <div id="con2" class="con2"></div>
                    </div>
                </div>

原生JS部分

        var area = document.getElementById('poemCon');
        area.scrollTop = 0;
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');
        con2.innerHTML = con1.innerHTML;

        function scrollUp () {
            if ( area.scrollTop >= con1.offsetHeight ) {
                area.scrollTop = 0;
            }else{
                area.scrollTop ++;
            }
        }

        var timer=setInterval(scrollUp,50);

        area.onmouseover = function () {
            clearInterval (timer);
        }
        area.onmouseout=function(){
            timer=setInterval (scrollUp , 50);
        }

關(guān)鍵點為： 復(fù)制一份小詩內(nèi)容到con2， 以及scrollTop 與 offsetHeight。