新闻上下轮播_iview 新闻上下轮播-优快云博客

项目中用到了新闻上下轮播，在网上找比较好的方法，记录一下。（转载自：https://blog.youkuaiyun.com/weixin_39522730/article/details/84931667）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .scrollNews {
         height: 30px;
         overflow: hidden;
    }

    ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul li {
        height: 30px;
    }
</style>
<body>
<div class="scrollNews">
    <ul>
        <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
    </ul>
</div>
</body>
<script src="jquery.js"></script>
<script>
    $(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':0}).find("li:first").appendTo(scroll);
            });
        }

          //悬停事件
          $this.hover(function () {
              clearInterval(settimes);//清楚定时器
          }, function () {
              settimes = setInterval(function () {
                  scrollNews($this);
              }, 3000);
          })
    });
</script>
</html>