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>
