js实现网站文字横向循环滚动公告

前二天我们发布了 “ 网站首页每天自动弹窗一次通知公告教程  ” 在分享一个方法，用js实现网站文字横向无限循环滚动公告，适用于网站临时公告通知，二种方法都是用来通知的，选一种喜欢的方式吧。

js

var scroll_div = document.getElementsByClassName("scroll_div")[0];
var scroll_begin = document.getElementsByClassName("scroll_begin")[0];
var scroll_end = document.getElementsByClassName("scroll_end")[0];
if (scroll_begin && scroll_begin.offsetWidth > scroll_div.offsetWidth) {
    ScrollImgLeft()
    scroll_end.style.display = "inline-block"
}
// 文字横向滚动
function ScrollImgLeft() {
    var speed = 50; // 滚动速度
    var MyMar = null; // 计时器
    scroll_end.innerText = scroll_begin.innerText;
    function Marquee() {
        if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {
            scroll_div.scrollLeft -= scroll_begin.offsetWidth;
        } else {
            scroll_div.scrollLeft++;
        }
    }
    MyMar = setInterval(Marquee, speed);
}

html

<div class="marquee-wrap">
    <div class="marquee-content">
        <div class="scroll_div">
            <pre class="scroll_begin">
                  放滚动内容
            </pre>
            <pre class="scroll_end" style="display:none;"></pre>
        </div>
    </div>
</div>

css

* {
padding:0;
margin:0;
}
.marquee-wrap {
box-sizing:border-box;
width: 1000px;
height: 35px;
padding: 5px;
margin:16px auto 30px;
background-image:linear-gradient(140deg,#ebd9eb 0%,#13bfdd 100%);
line-height:24px;
font-size: 16px;
text-align:center;
border-radius: 5px;
overflow:hidden;
user-select:none;
color: #1d1d1d;
}
.scroll_div {
white-space:nowrap;
overflow:hidden
}
.scroll_div pre {
display:inline-block;
padding:0 8px
}

PS：如果内容宽度大于外层元素的宽度则进行滚动，我这里是写的1000px，请根据你内容进行调整。