使用jquery实现文字滚动，鼠标悬停效果

这就是个简单的小栗子，希望可以帮助前端初学者。
效果：文字无缝滚动，鼠标悬停则停止，鼠标移开则重新滚动。
1、html代码：

<div class="scroll">    <ul class="list-unstyled">        <li>苹果</li>        <li>橘子</li>        <li>香蕉</li>        <li>菠萝</li>        <li>芒果</li>        <li>黄桃</li>    </ul></div>

2、css样式：

.scroll{    position: relative;    left: 20%;    top: 200px;    display: inline-block;    background-color: darksalmon;    height: 26px;    cursor: pointer;    overflow: hidden;}.scroll ul{    padding: 0px 60px;    position: relative;    line-height: 26px;    list-style-type: none;}

3、js行为：

$(function(){    //每隔1秒循环滚动    var a=setInterval('auto()',1000);    $(".scroll").hover(function(){        //清除滚动        clearInterval(a);    },function(){        //重新滚动        a=setInterval('auto()',1000);    })    auto();})function auto(){    //top的位移高度尽量和scroll的高度相同，可以很好控制滚动范围    $(".scroll ul").animate({"top":"-26px"},2000,function(){        //将ul的第一个li加到ul的最后        $(".scroll ul").css("top","0px").find("li:first").appendTo('ul');    })};