因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。

原生JS版本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文字上下无缝轮播</title>

</head>

<style>

    * {

        margin: 0;

        padding: 0;

    }

    #container{

        width: 60%;

        margin: 100px auto;

        position: relative;

        height: 200px;

        overflow: hidden;

    }

    #list-wrapper{

        position: relative;

    }

    ul {

        list-style: none;

        background: #f8f8f8;

        text-align: center;

        padding: 0 20px;

    }

    li{

        height: 35px;

        line-height: 35px;

        color: #fff;

    }

    li:nth-child(odd){

        background: #5077aa;

    }

    li:nth-child(even){

        background: #fb6b06;

    }

</style>

<body>

<div id="container">

    <div id="list-wrapper" style="top: 0">

        <ul class="notice-list" id="notice-list">

            <li>富强、民主、文明、和谐、自由1</li>

            <li>富强、民主、文明、和谐、自由2</li>

            <li>富强、民主、文明、和谐、自由3</li>

            <li>富强、民主、文明、和谐、自由4</li>

            <li>富强、民主、文明、和谐、自由5</li>

            <li>富强、民主、文明、和谐、自由6</li>

        </ul>

        <ul class="notice-list" id="notice-list-2">

        </ul>

    </div>

</div>

<script>

    var ROLL_SPEED = 100

    var noticeList1 = document.getElementById('notice-list');

    var noticeList2 = document.getElementById('notice-list-2');

    var listWrapper = document.getElementById('list-wrapper');

    noticeList2.innerHTML=noticeList1.innerHTML;

    var timer = setInterval(rollStart, ROLL_SPEED);

    function rollStart() {

        if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {

            listWrapper.style.top = '0px'

        } else {

            var top = listWrapper.style.top

            listWrapper.style.top = _subStr(top)-1+'px'

        }

    }

    // 截取px前数值

    function _subStr(str) {

        var index = str.indexOf('px');

        if (index > -1) {

            return parseFloat(str.substr(0, index + 1))

        }

    }

</script>

</body>

</html>

jQuery版本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文字上下无缝轮播</title>

</head>

<style>

    * {

        margin: 0;

        padding: 0;

    }

    #container{

        width: 60%;

        margin: 100px auto;

        position: relative;

        height: 200px;

        overflow: hidden;

    }

    #list-wrapper{

        position: relative;

        top: 0;

    }

    ul {

        list-style: none;

        background: #f8f8f8;

        text-align: center;

        padding: 0 20px;

    }

    li{

        height: 35px;

        line-height: 35px;

        color: #fff;

    }

    li:nth-child(odd){

        background: #5077aa;

    }

    li:nth-child(even){

        background: #fb6b06;

    }

</style>

<body>

<div id="container">

    <div id="list-wrapper">

        <ul class="notice-list" id="notice-list">

            <li>富强、民主、文明、和谐、自由1</li>

            <li>富强、民主、文明、和谐、自由2</li>

            <li>富强、民主、文明、和谐、自由3</li>

            <li>富强、民主、文明、和谐、自由4</li>

            <li>富强、民主、文明、和谐、自由5</li>

            <li>富强、民主、文明、和谐、自由6</li>

        </ul>

        <ul class="notice-list" id="notice-list-2">

        </ul>

    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>

    var ROLL_SPEED = 100

    var noticeList1 = $('#notice-list');

    var noticeList2 = $('#notice-list-2');

    var listWrapper = $('#list-wrapper');

    noticeList2.html(noticeList1.html())

    listWrapper.css('top', 0)

    var timer = setInterval(rollStart, ROLL_SPEED);

    function rollStart() {

        if (Math.abs(_subStr(listWrapper.css('top'))) >= noticeList1.height()) {

            listWrapper.css('top', 0)

        } else {

            var top = listWrapper.css('top');

            listWrapper.css('top', _subStr(top) - 1)

        }

    }

    // 截取px前数值

    function _subStr(str) {

        var index = str.indexOf('px');

        if (index > -1) {

            return parseFloat(str.substr(0, index + 1))

        }

    }

</script>

</body>

</html>

js、jQuery实现文字上下无缝轮播、滚动效果的更多相关文章

  1. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  2. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  3. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  4. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  5. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  6. 【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮

    在此随笔之前,博主已经做过一次图片滑动轮播,如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果,就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果,这是很不美观 ...

  7. jQuery插件实现左右无缝轮播

    前段时间学习jQuery的时候,在网上找了个SuperSlide插件,做轮播图demo,感觉对于新人而言,还是挺容易上手的,代码量也少. 直接贴代码吧. 1.HTML <!DOCTYPE htm ...

  8. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  9. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

随机推荐

  1. 2018-2019-2 20175213实验四 《Android开发基础》实验报告

    一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:吕正宏 学号:20175213 指导教师:娄嘉鹏 实验日期:2019年5月14日 实验时间:13:45 - 21:00 实验序号:实验 ...

  2. .net core linux的守护进程 supervisor

    这个介绍的很全面,对初学者来说可以有更好的认识: https://www.cnblogs.com/savorboard/p/dotnetcore-supervisor.html

  3. ceph安装过程

    创建群集[2019-03-20 18:35:04,232][ceph_deploy.conf][DEBUG ] found configuration file at: /home/sceph/.ce ...

  4. 发布delphi程序（build with runtime package）要带哪些文件？

    Delphi提供两种方式来编译你的程序:使用包或者是单独的exe 使用包,你可以使用如下方法设置: 项目选项(菜单project->options->Packages页), 在Runtim ...

  5. js比较日期时间的大小

    var myDate = new Date(); var timed = myDate.toLocaleDateString(); var oDate1 = new Date(item.express ...

  6. SSH远程免密码的密钥登录服务（Linux，Linux）

    本次实验基于两台Linux虚拟机之间的实验,一台做服务器,一台做客户机,模拟免密码的密钥登录. 首先两台虚拟机需要可以ping通,用客户机访问服务器. sshd服务主配置文件路径: /etc/ssh/ ...

  7. apache 安装配置 （centos）

    1. 使用yum包安装Apache软件 [root@Apache ~]# yum -y install httpd* [root@Apache ~]# rpm -qa | grep httpd --查 ...

  8. scrapy框架--新建调试的main.py文件

    一.原因: 由于pycharm中没有scrapy的一个模板,所有没办法直接在scrapy文件中调试,所有我们需要写一个自己的main.py文件,在文件里面调用命令行,来实现scrapy的一个调试.(在 ...

  9. canvas时间粒子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. LOGO有哪几种常规设计思路？

    Logo设计的思路多种多样,但是我个人从Logo设计的历史上,大致可以归纳出五种常规思路,思路的名称是自己编的,仅供大家参考.而列举的这些思路背后,都是有着各自的时代背景的. 先从历史最悠久的一种设计 ...