jq文字上下无线滚动轮播

最新推荐文章于 2024-06-19 14:56:38 发布

zhooson

最新推荐文章于 2024-06-19 14:56:38 发布

阅读量1.3k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/Zhooson/article/details/78386868

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>jq文字上下无线滚动轮播</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .content {
            margin: 100px auto;
            border: 1px solid red;
            overflow: hidden;
            width: 600px;
            height: 50px;
        }
        
        .lunbo {
            position: relative;
        }
        
        ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 600px;
            height: auto;
        }
        
        ul li {
            width: 600px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            color: #333;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="content">
        <ul class="lunbo">
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
    <script>
        function lunbo(id, height) {
            var ul = $(id);
            var liFirst = ul.find('li:first');
            $(id)
                .animate({
                    top: height,
                })
                .animate({
                        top: 0,
                    },
                    0,
                    function() {
                        var clone = liFirst.clone();
                        $(id).append(clone);
                        liFirst.remove();
                    }
                );
        }

        setInterval("lunbo('ul','-50px')", 2000);
    </script>
</body>

</html>