jQuery轮播图之上下无缝滚动

作者: 半夜成仙 | 来源:发表于2020-09-08 14:43 被阅读0次

05_jQuery_无缝滚动轮播效果插件封装
jQuery轮播图之上下无缝滚动
jQuery相关插件
jQuery封装组件
插件的使用2
无标题文章
轮播图
Slider - 轮播图
2018-11-10排他思想做轮播图
jquery实现无缝滚动轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    *{
        padding: 0;
        margin: 0;
    }
    .scrollNews{
        width: 80%;
        height: 3rem;
        overflow: hidden;
        margin: 2rem auto;
    }
    .scrollNews ul li{
        height: 3rem;
        line-height: 3rem;
    }


</style>
<body>
    <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>
</body>
<script src="jquery-3.5.1.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": "0px" }).find("li:first").appendTo(scroll);
            });
        }
        //悬停事件
        $this.hover(function () {
            clearInterval(settimes);//清楚定时器
        }, function () {
            settimes = setInterval(function () {
                scrollNews($this);
            }, 1000);
        }).trigger("mouseout")
        //提示信息
        var x = 10;  //初始化x轴和y轴
        var y = 20;
        $(".tooltip").mouseover(function (e) {  //鼠标移动上去
            this.MyTitle = this.title;         //初始化title
            this.title = "";
            //创建一个div元素
            var $add = "<div id='tooltip'>" + this.MyTitle + "</div>";
            //将创建的div元素追加到鼠标上面
            $("body").append($add);
            //给创建好的div元素添加样式
            $("#tooltip").css(
                {
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                }
                ).show("fast");   //快速显示
        }).mouseout(function () {   //鼠标移除
            this.title = this.MyTitle;
            $("#tooltip").remove(); //样式的移除
        }).mousemove(function (e) {
            $("#tooltip").css({    //文字提示随着鼠标移动
 
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            });
        });
    })

    
</script>
</html>