html轮播文字上下轮播,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;

}

• 富强、民主、文明、和谐、自