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

原生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. EAM(Enterprise Asset Management)企业资产管理系统

    EAM (Enterprise Asset Management)的缩写,EAM系统是指企业资产管理系统. EAM系统是在资产比重较大的企业,在资产建设.维护中减少维护成本,提高资产运营效率,通过现代 ...

  2. JS知识—面试准备（一）

    1.JS内置类型 分为基本数据类型和Object.基本数据类型有:null,undefined,string,boolean,number,symbol. console.log(typeof nul ...

  3. 杂项-Tmod：常见错误提示

    ylbtech-杂项-Tmod:常见错误提示 1.返回顶部 1. The column 'Content' was specified multiple times for 'T'.select a. ...

  4. opensuse 安装APACHE2+MYSQL+PHP5

    sudo zypper in apache2-mod_php5 apache2 mariadb 装好后, 记得启动APACHE2对PHP的支持: a2enmod php5 默认mysql密码为空, 可 ...

  5. IIS 解决跨域问题

    打开 HTTP响应标头 添加如下三条 名称Access-Control-Allow-Origin  值*名称Access-Control-Allow-Headers  值Content-Type,Ac ...

  6. UVA1442_Cave

    Cave 大致题意: 一个洞穴,已经i位置地面高度和顶的高度,要求在这个洞穴里面储蓄尽可能多的燃料,而且任何位置燃料不能碰到顶点 思路: 先从左往右扫描一下得出每一个点燃料能达到的最大高度,然后右边一 ...

  7. 转 Page Object模式

    Page Object模式是Selenium中的一种测试设计模式,主要是将每一个页面设计为一个Class,其中包含页面中需要测试的元素(按钮,输入框,标题 等),这样在Selenium测试页面中可以通 ...

  8. VS 2017产品秘钥

    Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH

  9. HDU 5159 Card( 计数 期望 )

    Card Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  10. [JSOI2016]无界单词

    题目 题意:求\(\rm border\)长度为\(0\)的\(n\)位\(0,1\)字符串个数,并求字典序第\(k\)小的那一个. 首先是计数,正向不是很好算,考虑正难则反:设\(f_i\)表示长度 ...