滚动容器结构
<div class="brand-box" style="max-width: 1600px; margin: 0 auto; overflow: hidden;">
<ul class="partner-list" id="elementNeedAnimation">
<li><a><img src="../resource/images/home/partner_logo1.png" alt=""></a><span>吉利汽车</span></li>
<li><a><img src="../resource/images/home/partner_logo2.png" alt=""></a><span>上海大众</span></li>
<li><a><img src="../resource/images/home/partner_logo3.png" alt=""></a><span>长安马自达</span></li>
<li><a><img src="../resource/images/home/partner_logo4.png" alt=""></a><span>江铃福特</span></li>
<li><a><img src="../resource/images/home/partner_logo5.png" alt=""></a><span>沃尔沃</span></li>
<li><a><img src="../resource/images/home/partner_logo6.png" alt=""></a><span>玛莎拉蒂</span></li>
<li><a><img src="../resource/images/home/partner_logo7.png" alt=""></a><span>宝马</span></li>
<li><a><img src="../resource/images/home/partner_logo8.png" alt=""></a><span>起亚</span></li>
<li><a><img src="../resource/images/home/partner_logo9.png" alt=""></a><span>江淮汽车</span></li>
<li><a><img src="../resource/images/home/partner_logo10.png" alt=""></a><span>北京现代</span></li>
<li><a><img src="../resource/images/home/partner_logo11.png" alt=""></a><span>上汽大通</span></li>
</ul>
</div>
改变ul元素的transform属性
var number = 1;
var start = null;
var cellsRow = document.getElementById("elementNeedAnimation");
function stepMover(timestamp){
timestamp = parseInt(timestamp);
if (!start) start = timestamp;
var progress = timestamp - start;
if(number == (lx-(-1))){
number = 1;
}
cellsRow.style.transform = "translateX("+(-Math.min((progress / 10) -(-(100*(number-1))), 100*number))+"px";
if (progress < 2000) {
window.requestAnimationFrame(stepMover);
}else{
var x = setTimeout(function(){
number++;
start = timestamp - (-1000);
window.requestAnimationFrame(stepMover);
clearTimeout(x);
},1000);
}
}
window.requestAnimationFrame(stepMover);