原生js实现中奖信息无间隙滚动效果

中奖信息无间隙滚动效果通常是在网页中的信息滚动区域，而且信息要连贯无缝滚动，没有间隙。实现这个效果的方法有很多，下面我来介绍一种基于原生JS实现的方法。

实现原理

在这个效果中，需要用到三个信息块，从上往下分别为当前显示块、上一个块、下一个块。通过修改它们的CSS属性，可以实现连续无缝滚动的效果。

1. 首先在HTML中创建滚动区域并添加三个信息块：

<div class="scroll-container"> 
   <p class="current">滚动信息</p> 
   <p class="next">滚动信息</p> 
   <p class="next">滚动信息</p> 
</div>

1. 在CSS中设置滚动区域的样式：

.scroll-container {
   height: 20px;
   overflow: hidden; 
}

1. 通过JS来实现滚动的效果。具体实现过程如下：

2. 获取上一个块、当前块和下一个块：

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

通过上述代码的综合运用，就能够实现中奖信息无间隙滚动效果。

阅读剩余 52%