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

輪播小詩(shī)

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

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