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

原生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. LOJ 2555 「CTSC2018」混合果汁——主席树

    题目:https://loj.ac/problem/2555 二分答案,在可以选的果汁中,从价格最小的开始选. 按价格排序,每次可以选的就是一个前缀.对序列建主席树,以价格为角标,维护体积和.体积*价 ...

  2. 31 July

    P1005 矩阵取数游戏 高精度不能更坑-- #include <cstdio> #include <cstring> struct INT { long long h, l; ...

  3. python中的装饰器基本理论

    装饰器 : 本质上 是一个 函数 原则 : 1,不修改原函数的源代码 2,不修改原函数的调用方式. 装饰器的知识储备 装饰器 = 高阶函数 + 函数嵌套 +闭包 我的理解是,函数名也是一个变量,将函数 ...

  4. 【原】webpack--loaders，主要解释为什么需要loaders和注意事项

    Why需要loaders? webpack开箱即用只支持JS和JSON两种文件类型,但是比如css.less,还有目前市场上比较新的语法糖jsx,怎么处理呢? 通过Loaders去支持其他文件类型并且 ...

  5. （四）添加yaffs2文件系统支持

    1. 获取yaffs2源码 在linux工作目录下进行clone操作: git clone git://www.aleph1.co.uk/yaffs2 完成后会在当前目录下产生yaffs2的源码目录: ...

  6. springboot 尚桂谷学习总结01

    ------springboot 技术入门------ 1.springboot 简介: 优点: 简化spring 应用开发的一个框架 整个spring技术栈的一个大整合 ------微服务----- ...

  7. pssh系列命令详解

    安装 pssh提供OpenSSH和相关工具的并行版本.包括pssh,pscp,prsync,pnuke和pslurp.该项目包括psshlib,可以在自定义应用程序中使用.pssh是python写的可 ...

  8. HTML创建文本框的3种方式

    我的第一个随笔,记录主要用来整理学习的知识点 1.input 创建单行文本框 <input type="text" size="10" maxlength ...

  9. Codefores 507B Amr and Pins

    B. Amr and Pins time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  10. HDU 2152 Fruit( DP )

    Fruit Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...