jQuery轮播图之上下无缝滚动

如图效果：

实现功能：

1.上下无缝滚动，

2.鼠标放上去停止滚动并出现提示信息

无缝滚动原理：

每一次将第一个li移动到最后一个（append）

html代码

 <div class="scrollNews">
                    <ul>
                        <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                        <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                        <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                        <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                        <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                        <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
                    </ul>
                </div>

jQuery代码：

//左侧无缝轮播
    $(function () {
        var settimes;//定时器
        var $this = $(".scrollNews");
        //方法
        function scrollNews(nature) {
            var scroll = nature.find("ul:first");
            var lineHeight = scroll.find("li:first").height();
            scroll.animate({ "margin-top": -lineHeight + "px" }, 600, function () {
                scroll.css({ "margin-top": "0px" }).find("li:first").appendTo(scroll);
            });
        }
        //悬停事件
        $this.hover(function () {
            clearInterval(settimes);//清楚定时器
        }, function () {
            settimes = setInterval(function () {
                scrollNews($this);
            }, 1000);
        }).trigger("mouseout")
        //提示信息
        var x = 10;  //初始化x轴和y轴
        var y = 20;
        $(".tooltip").mouseover(function (e) {  //鼠标移动上去
            this.MyTitle = this.title;         //初始化title
            this.title = "";
            //创建一个div元素
            var $add = "<div id='tooltip'>" + this.MyTitle + "</div>";
            //将创建的div元素追加到鼠标上面
            $("body").append($add);
            //给创建好的div元素添加样式
            $("#tooltip").css(
                {
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                }
                ).show("fast");   //快速显示
        }).mouseout(function () {   //鼠标移除
            this.title = this.MyTitle;
            $("#tooltip").remove(); //样式的移除
        }).mousemove(function (e) {
            $("#tooltip").css({    //文字提示随着鼠标移动

                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            });
        });
    })