js、jQuery实现文字从下到上（从右到左）无缝轮播、滚动效果

1、从下到上滚动

（1）jq版本

<!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 = 20
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>

（2）原生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>

2、从右到左

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向左滚动</title>
<style type="text/css">
*{
    baimargin:0;
    padding:0;
    list-style:none;
}
#gundong {
    background: #FFF;
    overflow: hidden;
    border: 1px dashed #CCC;
    width: 500px;
    font-size: 12px;
    height: 40px;
}
#gundong a {
    color:#333;
}
#gundongAreaMain1 {
    float: left;
    width: 800%;
}
#gundongAreaMain2, #gundongAreaMain3, #gundongAreaMain2 li, #gundongAreaMain3 li {
    float: left;
}
</style>
</head>
<body>
<div id="gundongAreaMain">
<span>导读</span>
<div id="gundong">
<div id="gundongAreaMain1">
<ul id="gundongAreaMain2">
<li><a href="/" target="_blank"><strong>1111111111111111</strong></a></li>
<li><a href="/" target="_blank"><strong>2222222222222222</strong></a></li>
<li><a href="/" target="_blank"><strong>3333333333333333</strong></a></li>
<li><a href="/" target="_blank"><strong>4444444444444444</strong></a></li>
</ul>
<ul id="gundongAreaMain3"></ul>
</div>
</div>
</div>
<script>
    var speed=30; //数字越du大速度越慢
    var tab=document.getElementById("gundong");
    var tab1=document.getElementById("gundongAreaMain2");
    var tab2=document.getElementById("gundongAreaMain3");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
        if(tab2.offsetWidth-tab.scrollLeft<=0)
            tab.scrollLeft-=tab1.offsetWidth
        else{
            tab.scrollLeft++;
        }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
</body>
</html>