原生js实现公告滚动效果

首先我们需要理解什么是公告滚动效果。公告滚动指的是一段文字或图片不断地从右向左（或从下向上）滚动，直至结束。我们通过使用原生js，可以很轻松地实现这一效果。

下面是具体的实现过程说明：

一、HTML结构

在HTML中，我们需要设置一个容器div来包裹所有要滚动的元素。这个容器需要设置合适的宽度和高度，并且需要设置overflow:hidden属性来控制滚动元素的显示部分。

具体示例代码如下：

<div class="scroll-container">
    <ul class="scroll-content">
        <li>这是第1条公告</li>
        <li>这是第2条公告</li>
        <li>这是第3条公告</li>
        <li>这是第4条公告</li>
    </ul>
</div>

二、CSS样式

在CSS中，需要对容器和滚动元素进行样式设置。容器需要设置合适的宽度和高度，并且需要设置overflow:hidden属性；滚动元素需要设置float:left或display:inline-block让其变成单行横向排列。

具体示例代码如下：

.scroll-container {
   width: 300px;
   height: 100px;
   overflow: hidden;
}
.scroll-content {
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
}
.scroll-content li {
   display: inline-block;
   margin-right: 20px;
}

三、JavaScript逻辑

在JavaScript中，我们需要对滚动元素进行无缝滚动，并且需要通过setTimeout函数实现延时效果，让滚动公告不断地向左滚动，直至结束。

具体示例代码如下：

function Marquee() {
   var container = document.querySelector(".scroll-container");
   var content = document.querySelector(".scroll-content");
   var child = content.children;
   var firstChild = child[0];
   var width = firstChild.offsetWidth + 20;
   var speed = 50; // 滚动速度
   var left = 0;
   setTimeout(function() {
       content.appendChild(firstChild);
       content.style.left = -width + "px";
   }, 0);
   setInterval(function() {
       left += 1;
       content.style.left = -left + "px";
       if (left == width) {
           left = 0;
           content.appendChild(content.children[0]);
           content.style.left = -left + "px";
       }
   }, speed);
}
Marquee();

上述代码中，我们通过querySelector的方法获取容器和滚动元素，计算出容器的宽度以及滚动速度，然后通过setTimeout函数实现自动滚动效果，采用setInterval函数不断地更新left值以及滚动元素的位置。同时，我们通过appendChild和style.left设置元素的位置与内容。

以上是一种比较常见的原生js实现公告滚动效果的攻略，下面是另外一种实现方式的示例。

示例1：利用CSS3实现公告滚动

在本示例中，我们采用了CSS3的transition动画属性，实现了公告向左滚动的效果。CSS3的transition是一种可以让元素在一段时间内从一个状态平滑过渡到另一个状态的动画效果。

具体示例代码如下：

<div class="scroll-container" onmouseover="stopRoll()" onmouseout="startRoll()">
   <div class="scroll-content">
       <div class="scroll-item">公告1</div>
       <div class="scroll-item">公告2</div>
       <div class="scroll-item">公告3</div>
       <div class="scroll-item">公告4</div>
       <div class="scroll-item">公告5</div>
   </div>
</div>

.scroll-container {
   width:400px;
   height:25px;
   overflow:hidden;
}
.scroll-content {
   display: flex;
   width:max-content;
   white-space: nowrap;
   transition:transform 0.5s linear;
}
.scroll-item{
   margin-right:20px; 
}

function startRoll(){
   var container = document.querySelector('.scroll-container');
   var content = document.querySelector('.scroll-content');
   var item = document.querySelector('.scroll-item');
   scroll = window.setInterval(function(){
       content.appendChild(item);
       content.style.transform = 'translateX(-' + getComputedStyle(content).width + ')';
   }, 3000);
}

function stopRoll(){
   window.clearInterval(scroll);
}
startRoll();

在此示例中，我们首先通过querySelector方法获取容器和滚动元素，使用flex布局以及white-space属性使元素能够在容器上水平排列，通过transition属性控制元素的动画效果。最后通过setInterval函数和transform属性实现自动滚动效果。

示例2：利用jQuery实现公告滚动

在此示例中，我们利用了jQuery库中的animate函数，并且将公告动态生成在DOM树中。

具体示例代码如下：

<div class="scroll-container">
    <ul class="scroll-content"></ul>
</div>

.scroll-container {
   width: 300px;
   height: 100px;
   overflow: hidden;
}
.scroll-content {
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
}
.scroll-content li {
   display: inline-block;
   margin-right: 20px;
}

var index = 0;
function newScroll(str) {
   var li = "<li>" + str + "</li>";
   $('.scroll-content').append(li);
   index++;
}
function Marquee() {
   var speed = 50;
   var container = $(".scroll-container");
   var content = $(".scroll-content");
   var firstChild = content.children().eq(0);
   var width = firstChild.width() + 20;
   var left = width;
   var len = content.children().length;
   setInterval(function() {
       if (index != 0) {
           newScroll("这是第" + (index + 1) + "条公告");
       }
       left--;
       if (left < -width) {
           content.children().eq(0).remove();
           left += width;
           len--;
           if (len < 4) {
               newScroll("这是第" + (index + 1) + "条公告");
           }
       }
       content.css("left", left + "px");
   }, speed);
}
Marquee();

在本示例中，我们使用jQuery库的append函数将新的公告内容动态添加到DOM树中，并通过eq函数和remove函数控制元素的数量，通过animate函数控制元素的动画效果，完成整个滚动的过程。

综上所述，以上是两个使用原生js和一个使用jQuery库实现公告滚动效果的示例。通过理解这些示例，我们可以了解到不同的实现方式，掌握一些常用的滚动特效技巧，同时可以根据需求自定义代码，实现不同的效果。