html中文字翻滚轮播,JS实现文字向上无缝滚动轮播

在做html页面时，为了提升网页的用户体验，我们需要在网页中加入一些特效，比如多行区域文字上下滚动就是经常用到的特效。代码如下图：

样式

* {

margin: 0;

padding: 0;

}

.container {

width: 800px;

height: 300px;

border: 1px solid;

overflow: hidden;

position: relative;

}

.container ul {

list-style: none;

position: absolute;

width: 100%;

top: 0;

text-align: center;

}

.container ul >li{

width: 100%;

height: 50px;

border: 1px solid;

line-height: 50px;

}

.container >.nav {

width: 100%;

height: 50px;

line-height: 50px;

position: absolute;

background-color: red;

z-index: 1;

text-align: center;

}

结构

滚动条

• Leo 中了一个手机
• 张三 中了一个手机
• 老王 中了一台洗衣机
• Leo 中了一个手机
• 妹妹 中了一带洗衣液
• 阿三 中了一个手机
• 阿四 中了一台电脑
• 阿五 中了一个手机
• 阿六 中了一部手机
• 阿巴 中了一个手机
• 阿十 中了一个手机

js

var container = document.getElementById('container');

var ul = document.getElementById('ul');

var timer = null;

function lunPo() {

if(!timer) {

var count = 0;

timer = setInterval(function() {

count +=1;

ul.style.top = count + 'px';

if(count >= 50) {

count = 0;

var flag;

flag = ul.children[0].cloneNode(true);

ul.removeChild(ul.children[0]);

ul.appendChild(flag)

}

},10)

}

}

lunPo();

Image 14.png

这样一个简单的文字向上轮播就完成啦！

希望我的理解可以给你们提供一些帮助，学识有限，如果有地方出现错误或者有更好的方法去实现，欢迎私信！