JQuery自动上滑标题效果

最新推荐文章于 2025-06-19 18:16:38 发布

转载最新推荐文章于 2025-06-19 18:16:38 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/665632

文章标签：

#javascript #ViewUI

本文介绍了一种利用JQuery实现的上滑标题轮播效果，通过定时改变ul元素的top属性来达到平滑滚动显示多个标题的目的。代码简单易懂，适合初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

设计思路：

用ul显示内部上滑标题，并在其外部添加一个div作为容器，然后使用JQuery的动画效果，使ul的top属性不断改变来实现上滑的效果。

代码展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!--引入JQuery-->
        <script type="text/javascript" src="libs/jquery.min.js" ></script>
        <title>上滑标题</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
            }
            #border{
                width: 300px;
                height: 30px;
                /*设置居中显示*/
                margin: 0 auto;
                position: relative;
                top: 20%;
                /*添加边框*/
                border: 2px black solid;
                /*隐藏内部超出部分*/
                overflow: hidden;
            }
            #border ul{
                position: absolute;
                /*去除列表样式*/
                list-style: none;
                top: 0px;
            }
            #border ul li{
                width: 300px;
                text-align: center;
                line-height: 30px;
                
            }
        </style>
    </head>
    <body>
        <div id="border">
            <ul>
                <li>猎豹3.21机器人之夜</li>
                <li>日启动试验性焚烧</li>
                <li>医生绘图解释病情</li>
                <li>拒绝求爱遭泼硫酸</li>
                <!--这里添加与第一条重复的数据目的是为了使轮播看起来有连续性-->
                <li>猎豹3.21机器人之夜</li>
            </ul>
        </div>
    </body>
    <script>
        $(function(){
            //定义变量c
            var c=0;
            //设置定时函数使得每隔1秒钟时间就滑动一次
            setInterval(function(){
                //通过改变c的值来改变显示的标题
                c++;
                //当滑到最后一个的时候将ul的位置直接跳到第一，来实现持续性轮播的效果
                if(c===5){
                    $("#border ul").css({"top":"0px"});
                    c=1;
                }
                var t=c*-30;
                $("#border ul").animate({"top":t+"px"});
            },1000);
        });
    </script>
</html>