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

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

原生JS版本

文字上下无缝轮播

* {

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;

}

• 富强、民主、文明、和谐、自由1
• 富强、民主、文明、和谐、自由2
• 富强、民主、文明、和谐、自由3
• 富强、民主、文明、和谐、自由4
• 富强、民主、文明、和谐、自由5
• 富强、民主、文明、和谐、自由6

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))

}

}

jQuery版本

文字上下无缝轮播

* {

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;

}

• 富强、民主、文明、和谐、自由1
• 富强、民主、文明、和谐、自由2
• 富强、民主、文明、和谐、自由3
• 富强、民主、文明、和谐、自由4
• 富强、民主、文明、和谐、自由5
• 富强、民主、文明、和谐、自由6

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))

}

}