js、jQuery实现文字上下无缝轮播、滚动效果

开心就好

2020-05-29

`原生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>

开心就好

0 关注 0 粉丝 0 动态

关注关注

安科网

js、jQuery实现文字上下无缝轮播、滚动效果

开心就好

原生JS版本

jQuery版本

开心就好

开心就好

`原生JS版本`

`jQuery版本`