jQuery轮播图之上下无缝滚动

如图效果：

实现功能：

1.上下无缝滚动，

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

无缝滚动原理：

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

html代码

 

                    

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

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 = "
" + this.MyTitle + "
";
            //将创建的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"
            });
        });
    })