JQ上下无缝滚动轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

水里飞鸟

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量2.9k

点赞数 3

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_39522730/article/details/84931667

版权

web前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!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>

jq 的animatie

$(selector).animate(styles,speed,easing,callback)
或者
$(selector).animate(styles,options)

jq 的hover用法

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发 mouseenter 和 mouseleave 事件。
注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。
在调用
$( selector ).hover( handlerIn, handlerOut )时
等同于调用
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );
调用
$(selector).hover(handlerInOut)
等同于调用
$( selector ).on( “mouseover mouseout”, handlerInOut );