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

2020-05-29 19:53:04 阅读：222 来源： 互联网

标签：jQuery 轮播 top list js 和谐 var 富强 listWrapper

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

标签：jQuery,轮播,top,list,js,和谐,var,富强,listWrapper
来源： https://www.cnblogs.com/xiewangfei123/p/12989325.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

原生JS版本

jQuery版本

`原生JS版本`

`jQuery版本`