js实现公告自动滚动

当我们在网站中需要展示一些公告信息时，如果公告内容比较多，可以通过实现公告自动滚动来达到更好的展示效果。下面是 JS 实现公告自动滚动的完整攻略。

步骤

1. 准备 HTML 结构

首先需要在 HTML 中定义公告的容器和公告内容的列表，如下所示：

<div class="notice">
    <ul>
        <li>公告1</li>
        <li>公告2</li>
        <li>公告3</li>
        <li>公告4</li>
        <li>公告5</li>
    </ul>
</div>  

2. 设置 CSS 样式

为公告容器 .notice 和公告列表 ul 设置 CSS 样式，如下所示：

.notice{
    width: 500px;
    height: 40px;
    overflow: hidden;
    position: relative;
}
.notice ul{
    position: absolute;
    padding: 0;
    margin: 0;
    list-style: none;
    animation: move 10s infinite linear;
}
.notice li{
    height: 40px;
    line-height: 40px;
}
@keyframes move{
    0%{top: 0;}
    100%{top: -200px;}
}

其中，overflow: hidden; 表示内容超出容器部分隐藏，absolute 使公告列表脱离普通文档流，animation: move 10s infinite linear; 表示执行 move 动画，执行时间为 10s，无限循环，动画速度线性。

3. 实现 JavaScript 动态效果

使用 JS 动态地向公告列表 ul 中添加单个公告，直到列表中的公告数等于指定的数量，之后删除最上面的公告，以达到公告自动滚动的效果。JavaScript 代码如下所示：

var notice_list = document.querySelector('.notice ul');
var notice_items = ['公告1', '公告2', '公告3', '公告4', '公告5'];
var notice_num = notice_items.length;
var interval = 3000; // 时间间隔为3秒

for(var i = 0; i < notice_num; i++){
    var li = document.createElement('li');
    li.innerHTML = notice_items[i];
    notice_list.appendChild(li);
}

setInterval(function(){
    var first_li = notice_list.firstElementChild;
    notice_list.removeChild(first_li);
    var li = document.createElement('li');
    var random_num = Math.floor(Math.random()*notice_num);
    li.innerHTML = notice_items[random_num];
    notice_list.appendChild(li);
}, interval);

其中，firstElementChild 方法获取公告列表的第一个子元素，removeChild 方法删除该子元素，createElement 方法创建新的 li 元素并插入公告内容，random_num 表示随机的公告内容下标。

示例

示例1

公告内容固定展示，每 3 秒钟自动滚动。

演示效果：https://codepen.io/xiaoyunfeixue/pen/LYpyjWG

示例2

公告内容可随机变化，每 5 秒钟自动滚动。

演示效果：https://codepen.io/xiaoyunfeixue/pen/gOryExR

以上是 JS 实现公告自动滚动的完整攻略和示例说明。