首页 > 其他分享 >js文字无限循环向上滚动轮播

js文字无限循环向上滚动轮播

时间:2024-08-07 16:19:19浏览次数:10  
标签:box con1 con2 滚动 轮播 liLen js scrollBox var

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet">
    <title>滚动文字</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
            display: block;
        }

        #scrollBox {
            height: 150px;
            width: 300px;
            margin: 100px auto;
            background: red;
            overflow: hidden;
            color: #fff;
        }

        #scrollBox #con1,
        #con2 {
            width: 280px;
            float: left;
        }

        #scrollBox li {
            height: 15px;
            line-height: 15px;
            text-align: center;
            margin-bottom: 15px
        }
    </style>
</head>

<body>
    <div id="scrollBox">
        <ul id="con1">
            <li> 1、浓雾 犹如波纹般散开</li>
            <li> 2、我多像是 一颗粒子醒来</li>
            <li> 3、无止境的水域</li>
            <li> 4、旋转在其中的银河</li>
            <li> 5、只留下了一道沉默的白</li>
            <li> 6、四周 是否从未有谁在</li>
        </ul>
        <ul id="con2"></ul>
    </div>

    <script>

        var box = document.getElementById("scrollBox");
        var con1 = document.getElementById("con1");
        var con2 = document.getElementById("con2");
        con2.innerHTML = con1.innerHTML;

        var liLen = con1.getElementsByTagName('li');
        console.log('liLen ', liLen);
        console.log('liLen ', liLen.length);

        function scrollUp() {
            if (box.scrollTop >= con1.offsetHeight) {
                box.scrollTop = 0;
            } else {
                box.scrollTop++;
            }
        }
        // 大于6条数据 开始滚动
        if (liLen.length > 5) {
            var time = 50;
            var mytimer = setInterval(scrollUp, time);
            box.onmouseover = function () {
                clearInterval(mytimer);
            };
            box.onmouseout = function () {
                mytimer = setInterval(scrollUp, time);
            };

        }


    </script>
</body>

</html>

标签:box,con1,con2,滚动,轮播,liLen,js,scrollBox,var
From: https://www.cnblogs.com/j-a-h/p/18347250

相关文章

  • JSON反序列化中的泛型问题及解决方法
    1、问题Java的泛型是编译期擦除,因此反序列化无法直接指定泛型类型:List<User>list=JsonbBuilder.create().fromJson(json,List<User>.class);编译不通过,改为List.class又达不到预期效果。2、解决办法jackson的做法:List<User>list=JsonbBuilder.create().fromJson(jso......
  • nextjs14 跨域该如何处理
    nextjs官方地址next.config.js和next.config.mjs他有什么区别next.config.js:使用的是CommonJS模块系统。这是Next.js默认的配置文件格式,也是大多数情况下使用的格式。使用require语法导入模块,使用module.exports导出对象。next.config.mjs:使用的是ESMod......
  • 部署nuxt3.js到nginx的过程
    1.先安装好nodejs的版本我centos7版本,最后发现支持nodejs-v16.20版本在[sytyuser1@syit-dev-linux-01node]$pwd/usr/local/node在 /usr/local/node  目录下载wgethttps://nodejs.org/dist/latest-v16.x/node-v16.20.2-linux-x64.tar.gz解压 tar-zxvf node-v16.20.......
  • [MRCTF2020]套娃 php字符串解析绕过,jsfuck编码
    进来看到代码<!--//1st$query=$_SERVER['QUERY_STRING'];if(substr_count($query,'_')!==0||substr_count($query,'%5f')!=0){die('Y0uareSocutE!');}if($_GET['b_u_p_t']!=='23333'......
  • 在组件外(.js文件)中使用pinia的解决方法
    Pinia是Vue3的状态管理库,它提供了一种简单而灵活的方式来管理Vue应用中的状态。通常情况下,Pinia与Vue组件紧密集成,允许你在组件内部直接使用Pinia来管理状态。然而,有时你可能需要在组件外部使用Pinia,例如在Node.js环境中或者在Vue组件之外的JavaScript文件中。......
  • JSP高血压的医疗在线问答诊断系统ft78d
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能介绍:患者,医生,医生咨询,在线问诊,医疗诊断技术要求:    开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库......
  • node.js 多版本管理 nvm的安装和使用
    #安装nvm#项目链接#https://github.com/nvm-sh/nvm#1、安装与更新使用curl或wgetcurl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh|bash#或wget-qO-https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh|bash#......
  • JSP高校运动会管理信息系统vpu16
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能表:运动员,裁判员,项目名称,比赛信息,比赛报名,比赛成绩开题报告内容一、研究背景与意义高校运动会作为校园文化的重要组成部分,不仅关乎学生体质健康,还......
  • com.alibaba.fastjson 将object装jsonObject两次字段顺序会出现不一致
    Objectentity=params.get("entity");JSONObjectjsonObject=(JSONObject)JSONObject.toJSON(entity);//遍历JSONObjectfor(Map.Entry<String,Object>entry:jsonObject.entrySet())以上代码,在同一个object,两次经过的到时候,遍历J......
  • 基于javaweb jsp ssm网上书城系统的设计与实现+vue录像(源码+lw+部署文档+讲解等)
    前言......