HTML通知广告滚动【横向】

HTML部分

<div id="container">
			<div style="float: left;display: inline-block;width: 50px;height: 40px;line-height: 40px;margin-left: 10px">
			</div>
			<ul id="list">
				<li class="adLi">
					广告1
				</li>
				<li class="adLi">
					广告2
				</li>
				<li class="adLi">
					广告3
				</li>
				<li class="adLi">
					广告4
				</li>
			</ul>
		</div>

CSS部分

#container {
    position: relative;
    width:100%;
    height: 40px;
    overflow: hidden;
    margin: 0 auto;
    border-top:1px solid #fa614d;
    border-bottom: 1px solid #fa614d;
    background-color: #f5f5f5;
    margin-top:10px;
}
#list {
    position: absolute;
    left: 0;
    width: 1000px;
    height: 200px;
    color: #000;
    font-size: 30px;
    display:flex;
}
#list li{
    margin-left: 100px;
    list-style: none;
    display: inline;
    font-size: 16px;
    color: #fa614d;
    height: 40px;
    line-height: 40px;
}

#list li:first-child{
    margin-left: 50px;

}

js部分

<script type="text/javascript">
	window.onload = function() {                      //预加载页面进入即开始加载
		var list = document.getElementById('list');
		var aLi = document.getElementsByClassName('adLi');

		/*设置以下变量*/
		var n = list.getElementsByTagName('li').length;  //获取当前ul下的li个数
		var newLeft = 0;                                 //初始化ul的left的值
		var speed = 1;                                  //设置滚动速度速度越大滚动越快
		var s = 0;                                      //读取li所有的和
		var num = 0;                                    //计时器中的num自增变量

		for(var i=0;i<aLi.length;i++){
			s += parseInt(aLi[i].offsetWidth);         //offsetWidth读取的是内容宽度+内边距+边宽
		}
		var total = s+n*100;                        //获取总宽度
		/*计时器修改left的值*/
		setInterval(function () {
			newLeft = -speed*num;
			num++;
			/*达到设置的最大值之后，继续重头开始*/
			if(num >= total){
				num = 0;
			}
			list.style.left = newLeft + 'px';
		}, 10)
	}
</script>