JQuery无缝轮播

轮播图我们很常见的功能，可以使用原生的js进行实现，也可以使用jQuery进行实现，还可以使用H5C3进行实现，当然也可以使用swiper插件很方便的实现，这里先用jQuery实现一个无缝的轮播。

在这里主要是做的文本轮播，文本轮播其实和图片是一样的

思路：

1、首先获取要操作的对象

2、设置定时器

3、当鼠标放上去时停止轮播

4、鼠标移开时继续轮播

html板块：

            <div class="global_module news">
                <h3>最新动态</h3>
                <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>
                <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
            </div>

css板块：

元素 {
    margin-top: -16.7765px;
}
.content_left .news ul {
    padding: 5px 0 5px 15px;
}
ul, li {
    list-style: none;
}
* {
    margin: 0;
        margin-top: 0px;
    padding: 0;
    word-wrap: break-word;
    word-break: break-all;
}
.content_left .scrollNews {
    line-height: 20px;
}
body {
    color: #333;
    font: 12px/1.6em Helvetica, Arial, sans-serif;
        line-height: 1.6em;
}

jquery板块：

$(function () {
    //--最新动态效果
    //
    var $one = $(".scrollNews");
    var scrollTimer;
    $one.hover(function () {
        //清除定时器
        clearInterval(scrollTimer);
    }, function () {
        scrollTimer = setInterval(function () {
            scrollNews($one);
        }, 2000);
    }).trigger("mouseout");
    function scrollNews(obj) {
        //find搜索所有与指定表达式匹配的元素
        var self = obj.find("ul:first");
        //获取当前li的高度
        var lineHeight = self.find("li:first").height();
        self.animate({ "margin-top": -lineHeight }, 2000, function () {
            //将li追加到ul的尾部适应循环
            self.css({ "margin-top": "0px" }).find("li:first").appendTo(self);
        });
    }
})