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

原生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. Oracle数据库之触发器(一)

    触发器trigger是数据库提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动,而是由事件来触发.比如当对一个表进行操作(in ...

  2. LOJ 2979 「THUSCH 2017」换桌——多路增广费用流

    题目:https://loj.ac/problem/2979 原来的思路: 优化连边.一看就是同一个桌子相邻座位之间连边.相邻桌子对应座位之间连边. 每个座位向它所属的桌子连边.然后每个人建一个点,向 ...

  3. window安装activemq

    原文: https://www.cnblogs.com/donsenChen/p/8656563.html ActiveMQ5.14.5下载地址 http://activemq.apache.org/ ...

  4. python中的生成器和迭代器

    前言: 我们来了解一下什么是python中生成器.了解一下python生成器是什么,以及生成器在python编程之中能起到什么样的作用. 定义: 生成器和迭代器 通过列表生成式,我们可以直接创建一个列 ...

  5. MySQL中truncate误操作后的数据恢复案例

    MySQL中truncate误操作后的数据恢复案例 这篇文章主要介绍了MySQL中truncate误操作后的数据恢复案例,主要是要从日志中定位到truncate操作的地方然后备份之前丢失的数据,需要的 ...

  6. Workflow：Workflow 百科

    ylbtech-Workflow:Workflow 百科 工作流(Workflow),指“业务过程的部分或整体在计算机应用环境下的自动化”.是对工作流程及其各操作步骤之间业务规则的抽象.概括描述.在计 ...

  7. 不小心执行了 rm -f，先别急着跑路

    作者:justmine http://www.cnblogs.com/justmine/p/10359186.html 前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行 ...

  8. Scrapy框架: 通用爬虫之CSVFeedSpider

    步骤01: 创建项目 scrapy startproject csvfeedspider 步骤02: 使用csvfeed模版 scrapy genspider -t csvfeed csvdata g ...

  9. python3.6：AttributeError: 'generator' object has no attribute 'next'

    环境:PyCharm+Anaconda python版本:3.6 协程测试: #!/usr/bin/env python # -*- coding:utf-8 -*- import time def ...

  10. Centos7下源码编译安装与配置redis5.0

    1.下载redis5.0源码包 wget http://download.redis.io/releases/redis-5.0.5.tar.gz 2.检查是否安装过之前的历史版本 rpm -qa|g ...