效果图

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题文字轮播</title>
    <style>
        *{
     
     
            padding: 0px;
            margin: 0px;
        }
        .display{
     
     
            height: 30px;
            position: relative;
            /* 溢出的元素隐藏 */
            overflow: hidden;
        }
        p {
     
     
            line-height: 30px;
            position: absolute;
            /* 默认p元素都在div下面 */
            top: 30px;
        }
        /* 先定义两个class ：show刚好显示在div中间；up跑到div上面*/
        .show{
     
     top: 0px;transition: 1s top ease-out;}
        .up{
     
     top: -30px;transition: 1s top ease-out;}
        /* 给每个p元素设置不同的颜色 */
        p:nth-child(1){
     
     color: fuchsia;}
        p:nth-child(2){
     
     color: lightgreen;}
        p:nth-child(3){
     
     color: blueviolet;}
        p:nth-child(4){
     
     color: limegreen;}
    </style>
</head>
<body>
    <div class="display">
        <p class="show">这是一个标题文字轮播效果</p>
        <p>使用到简单的javascript</p>
        <p>你觉得不错的话可以可以看看我的主页</p>
        <p class="end">最后别忘了点赞哦</p>
    </div>

    <script>

        //每2.5秒执行一次下面的代码
        setInterval(function () {
     
     
            //获取class为show的p标签
            let show = document.querySelector('p.show');
            //获取show的下一个p标签，如果show是最后一个标签，则获取第一个p标签
            let next = show.nextElementSibling || document.querySelector('p:first-child');
            //获取class为 up的p标签
            let up = document.querySelector('p.up');
            //当移除class为show的p标签的class
            show.classList.remove('show');
            //然后给它添加值为：up的class，
            show.classList.add('up');
            //给下一个标题他添加值为：show的class
            next.classList.add('show');
            //如果有那个有带有up，则移除他的up，
            if(up) {
     
     
                up.classList.remove('up');
            }
            
        },2500)

    </script>
</body>
</html>
js实现标题文字向上轮播

效果图

代码

猜你喜欢
