定时器实现文字无缝滚动后定时器失效?

通过js设置了文字的无缝滚动,如图1

图1 滚动正常

但是浏览了其他页面回来后就就成了图2的样子,这个情况在谷歌、火狐、Opera都有这个情况,ie却是正常的

图2 滚动异常

js代码如下

function baner() {
    var ban = document.querySelector(".ban"),
        ba,
        index = 0,
        ru;
    if (ban) {
        ru = setInterval(run, 3000);

        function run() {
            ba = setInterval(function() {
                index++;
                ban.style.top = -index + "px";
                if (index % 20 == 0) {
                    clearInterval(ba);
                }
                if (index == 220) {
                    index = 0
                    ban.style.top = "0px";
                }
            }, 40)
        }
        /* 鼠标移入滚动停止 */
        ban.onmouseover = function() {
            clearInterval(ru);
            clearInterval(ba);
            /* 鼠标移出滚动继续 */
            ban.onmouseout = function() {
                run();
                ru = setInterval(run, 3000);
            }
        }
    }

}

html代码如下

 <div class="ban">
                <a href="" rel="nofollow">
                        <p>① 完善文章信息</p>
                </a>
                <a href="" rel="nofollow">
                        <p>② 开具初审录用</p>
                </a>
                <a href="" rel="nofollow">
                        <p>③ 编辑整理稿件</p>
                </a>
                <a href="" rel="nofollow">
                        <p>④ 英语编辑审稿</p>
                </a>
                <a href="" rel="nofollow">
                        <p>⑤ 总编室审稿</p>
                </a>
                <a href="" rel="nofollow">
                        <p>⑥ 外审编辑审稿</p>
                </a>
                <a href="" rel="nofollow">
                        <p>⑦ 排版校对</p>
                </a>
                <a href="" rel="nofollow">
                        <p>⑧ 印刷前校对</p>
                </a>
                <a href="" rel="nofollow">
                        <p>⑨ 印刷出刊</p>
                </a>
                <a href="" rel="nofollow">
                        <p>⑩ 邮寄</p>
                </a>
                <a href="" rel="nofollow">
                        <p>⑪ 出刊后30天左右知网收录</p>
                </a>
                <a href="" rel="nofollow">
                        <p>① 完善文章信息</p>
                </a>
                <a href="" rel="nofollow">
                        <p>② 开具初审录用</p>
                </a>
                <a href="" rel="nofollow">
                        <p>③ 编辑整理稿件</p>
                </a>
</div>

你是不是离开页面的时候没有清除定时器