中奖信息无间隙滚动效果通常是在网页中的信息滚动区域，而且信息要连贯无缝滚动，没有间隙。实现这个效果的方法有很多，下面我来介绍一种基于原生JS实现的方法。
在这个效果中，需要用到三个信息块，从上往下分别为当前显示块、上一个块、下一个块。通过修改它们的CSS属性，可以实现连续无缝滚动的效果。
<div class="scroll-container">
<p class="current">滚动信息</p>
<p class="next">滚动信息</p>
<p class="next">滚动信息</p>
</div>
.scroll-container {
height: 20px;
overflow: hidden;
}
通过JS来实现滚动的效果。具体实现过程如下：
获取上一个块、当前块和下一个块：
var currentEl = document.querySelector('.current');
var prevEl = document.querySelector('.prev');
var nextEl = document.querySelector('.next');
function slide() {
prevEl.innerHTML = currentEl.innerHTML;
currentEl.innerHTML = nextEl.innerHTML;
nextEl.innerHTML = prizeList[i];
++i;
if (i >= prizeList.length) {
i = 0;
}
setTimeout(slide, 1000);
}
slide();
```html
一等奖：100元红包
二等奖：50元红包
三等奖：20元红包
```
var prizeList = [
'一等奖：100元红包',
'二等奖：50元红包',
'三等奖：20元红包',
'参与奖：谢谢参与'
];
var currentEl = document.querySelector('.current');
var prevEl = document.querySelector('.prev');
var nextEl = document.querySelector('.next');
var i = 0;
function slide() {
prevEl.innerHTML = currentEl.innerHTML;
currentEl.innerHTML = nextEl.innerHTML;
nextEl.innerHTML = prizeList[i];
++i;
if (i >= prizeList.length) {
i = 0;
}
setTimeout(slide, 1000);
}
slide();
通过上述代码的综合运用，就能够实现中奖信息无间隙滚动效果。
本文链接：http://task.lmcjl.com/news/8521.html