效果图：

全部代码：

<!DOCTYPE html>

<html lang="en">

<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">

    <title>Document</title>

    <style>

        *{margin: 0;padding: 0}

        #box{height: 140px; border: solid 1px; overflow: hidden;}

    </style>

</head>

<body>

    <div id="box">

        <ul id="ul1">

            <li>1111111111111111111111</li>

            <li>2222222222222222222222</li>

            <li>3333333333333333333333</li>

            <li>4444444444444444444444</li>

            <li>5555555555555555555555</li>

            <li>6666666666666666666666</li>

            <li>7777777777777777777777</li>

            <li>8888888888888888888888</li>

            <li>9999999999999999999999</li>

        </ul>

        <ul id="ul2"></ul>

    </div>

    <script>

        window.onload = roll(50);

        function roll(t) {

            var ul1 = document.getElementById("ul1");

            var ul2 = document.getElementById("ul2");

            var box = document.getElementById("box");

            ul2.innerHTML = ul1.innerHTML;

            box.scrollTop = 0;

            var timer = setInterval(rollStart, t);

            box.onmouseover = function () {

                clearInterval(timer)

            }

            box.onmouseout = function () {

                timer = setInterval(rollStart, t);

            }

        }

        function rollStart() {

            if (box.scrollTop >= ul1.scrollHeight) {

                box.scrollTop = 0;

            } else {

                box.scrollTop++;

            }

        }

    </script>

</body>

</html>

JS实现文字向上无缝滚动轮播的更多相关文章

  1. 3、js无缝滚动轮播

    另一个无缝滚动轮播,带暂停,由于js是异步,用C面向过程的思想开始会很怪异很怪异,因为当你定时器里面需要执行的函数时间比较长或是有一段延时时,异步的代码会完全不同,但习惯就好了. 这个代码有几个问题, ...

  2. jQuery仿淘宝图片无缝滚动轮播

    自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...

  3. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  4. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  5. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. JS实现文字图片无缝滚动

    今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...

  7. 原生JS简单的无缝自动轮播

    最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...

  8. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  9. JQuery 滚动轮播

    css: *{margin: 0;padding: 0;}body{font-size: 12px;line-height: 24px;text-algin: center; }a{color: #f ...

随机推荐

  1. 在Activity/Fragment以外使用Toast【转】

    在 Activity 使用 Toast 这种是最基本的使用,Toast的第一个参数就是Context,一般在Activity中我们直接用this代替,代表调用者的实例为Activity. public ...

  2. 【转载】用户通过WEB方式更改AD域帐户密码

    用户改自己的域帐户密码一般通过以下几种方式: 加域的PC,用户直接按:Ctrl+Alt+Del键,点击:更改密码 通过exchange owa更改密码 让管理员重置密码 除了以上方式外,很多企业通过开 ...

  3. Redis锁机制的几种实现方式

    1. redis加锁分类 redis能用的的加锁命令分表是INCR.SETNX.SET 2. 第一种锁命令INCR 这种加锁的思路是, key 不存在,那么 key 的值会先被初始化为 0 ,然后再执 ...

  4. cmd xcopy进行远程复制

    首先  win+R 打开cmd 1  目标远程服务器 查看共享的文件夹 net share 2 与远程建立连接 net use \\192.168.3.200\ipc$ Yhxwl123456 /us ...

  5. Win10任务栏卡死解决方法

    有时,切换输入法,或者点击windows底部菜单,电脑鼠标会变成忙碌转圈圈的状态,无法操作底部菜单功能: 1. ctrl+shift+esc(或者ctrl+alt+delete)的方式调出任务管理器: ...

  6. top命令定位CPU高占用代码

    步骤如下: 1.使用top命令定位异常进程.可以看见12836的CPU和内存占用率都非常高 2.使用top -H -p 进程号查看异常线程 3.使用printf "%x\n" 线程 ...

  7. 《发际线总是和我作队》第九次作业：Beta冲刺Scrum Meeting3

    项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目冲刺 团队名称 发际线总和我作队 作业学习目标 (1)掌握软件黑盒测试技术:(2)掌握软件 ...

  8. 示例 NetworkWordCount

    import org.apache.spark.storage.StorageLevel import org.apache.spark.streaming.{Seconds, StreamingCo ...

  9. python_requests ~爬虫~小视频~~~

    当一只小小的Py_Spider也有一段时间了, 期间,更多的时间是在爬取图片啊, 文字, 文档这类的东西, 今天突然一时兴起, 来爬一手视频! 所以就找到了远近闻名的六间房(六扇门)哈哈,~~~ 1. ...

  10. [JSOI2018]战争

    题目描述 九条可怜是一个热爱读书的女孩子. 在她最近正在读的一本小说中,描述了两个敌对部落之间的故事.第一个部落有 nnn 个人,第二个部落有 mmm 个人,每一个人的位置可以抽象成二维平面上坐标为 ...