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>
