滾動容器結(jié)構(gòu)

<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>長安馬自達(dá)</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>北京現(xiàn)代</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);