html中新闻咨询自动滚动,js+css新闻公告向上滚动

公告向上间歇性向上滚动

使用setInterval进行间隔调用，activityIndex * 单个li的高度；

复制第一条添加到最后，删除transtion特效。

html

• 111111111111
• 222222222
• 333333333
• 444444444444
• 555555555555
• 111111111111

css

* {

margin: 0;

padding: 0;

}

.big {

height: 500px;

width: 500px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: #ccc;

}

.small {

height: 25px;

background-color: red;

line-height: 25px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

overflow: hidden;

}

.tran {

margin-top: 0;

transition: margin-top 2s

}

.small li {

height: 25px;

line-height: 25px;

}

.small li:nth-child(1) {

background-color: blue;

}

.small li:nth-child(2) {

background-color: yellow;

}

.small li:nth-child(3) {

background-color: green;

}

.small li:nth-child(4) {

background-color: yellowgreen;

}

.small li:nth-child(5) {

background-color: greenyellow;

}

js

let activityIndex = 0;

listUL = document.getElementById('listUL')

firstLi = listUL.children[0]

listLength = listUL.children.length;

function roll(params) {

listUL.classList.add("tran")

if (activityIndex < listLength-1) {

activityIndex++

} else {

listUL.classList.remove("tran")

activityIndex = 0

}

listUL.style.marginTop = -activityIndex * 25 + 'px'

console.log(activityIndex)

}

setInterval(roll, 2000);