Jquery实现轮播公告

攻城狮秋羽技术 2022年11月14日

0 收藏 691 点赞 2,290 浏览 1079 个字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .line {
      background-color: gray;
      height: 30px;
      overflow: hidden;
      line-height: 30px;
    }
    li {
    }
  </style>
  <script>
  </script>
</head>
<body>
  <ul class="line">
    <li><a href="#">hello</a></li>
    <li><a href="#">world</a></li>
    <li><a href="#">good</a></li>
  </ul>
</body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
/**
 * 公告轮播插件
 * @param  {number} $ liHeight  li元素的高度
 * @param  {number} $ time  轮播间隔时间
 * @param  {number} $ movetime  轮播持续时间
 */
(function($) {
  $.fn.extend({
    "slideUp": function(value) {      var docthis = this;
      //默认参数
      value = $.extend({
        "liHeight": "30",
        "time": 2000,
        "movetime": 1000
      }, value)
      //向上滑动动画
      function autoplay() {
        $("li:first", docthis).animate({ "margin-top": -value.liHeight }, value.movetime, function() {
          $(this).css("margin-top", 0).appendTo(".line");
        })
      }      //自动间隔时间向上滑动
      var anifun = setInterval(autoplay, value.time);      //悬停时停止滑动，离开时继续执行
      $(docthis).children("li").hover(function() {
        clearInterval(anifun); //清除自动滑动动画
      }, function() {
        anifun = setInterval(autoplay, value.time); //继续执行动画
      })
    }
  })
})(jQuery)$('.line').slideUp()
</script>
</html>