新闻上下轮播

最新推荐文章于 2022-09-17 18:03:52 发布

Mo_zifeng

最新推荐文章于 2022-09-17 18:03:52 发布

阅读量669

点赞数

分类专栏： Jquery 文章标签：轮播新闻

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目中用到了新闻上下轮播，在网上找比较好的方法，记录一下。（转载自：https://blog.csdn.net/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>

Mo_zifeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新闻上下轮播

项目中用到了新闻上下轮播，在网上找比较好的方法，记录一下。（转载自：https://blog.csdn.net/weixin_39522730/article/details/84931667）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...
复制链接

扫一扫