单行滚动实现一

结构

<div class="ctn" id="ctn" οnmοuseοut="start()" οnmοuseοver="stoprun()">
    <div class="item"><a href="#">1此处显示的内显示的显示的显示的容</a></div>
    <div class="item"><a href="#">2此处显示的内显示的显示的显示的容</a></div>
    <div class="item"><a href="#">3此处显示的内显示的显示的显示的容</a></div>
    <div class="item"><a href="#">4此处显示的内显示的显示的显示的容</a></div>
    <div class="item"><a href="#">1此处显示的内显示的显示的显示的容</a></div>
</div>

样式

.ctn{height:25px; border:1px solid #F60; overflow:hidden}
.item{line-height:25px; height:25px; padding-left:20px}
.item a{font-size:14px; color:#36F; text-decoration:none}
.item a:hover{color:#F60; text-decoration:underline}

行为

<script type="text/javascript">
    function getid(id) {
        return document.getElementById(id);
    }
    var ctnobj, timobj1, timobj2, num;
    num = 0;
    ctnobj = document.getElementById("ctn");
    function run() {
        if (ctnobj.scrollTop >= 100) {
            ctnobj.scrollTop = 0;
        }
        timobj1 = setInterval(move, 30);
    }
    function move() {
        if (num < 25) {
            num++;
            ctnobj.scrollTop++;
        } else {
            num = 0;
            clearInterval(timobj1);
        }
    }
    function start() {
        timobj2 = setInterval(run, 2000);
    }
    function stoprun() {
        clearInterval(timobj2);
    }
    window.onload = start();
</script>

注意

结构列表里最后一项要与第一项重复
if(ctnobj.scrollTop>=100)中100等于（项数-1）×高度

转载于:https://www.cnblogs.com/hidepeng/archive/2011/03/26/1996152.html