javascript - 滑动标志 - 最好的方法

Question

我正在创建事件页面，并在底部放置了许多 Logo 。它从右向左滑动。我不使用 jQuery，只使用纯 Javascript，我只是想知道最佳性能。我的代码有效，但也许有更好的方法来做到这一点？我认为这个“动画”有时会变慢。

var banners = [],
    links = [];

links[0] = 'http://...',
banners[0] = 'img/logo1.png',
...

var banLenght = banners.length,
    banContent = "<div id='bannersBack'><div id='banners' style='display:inline-block;'>";

for (var ii =0; ii < banLenght; ii++){
    banContent += "<a target='_blank' href='"+links[ii]+"'><img src='"+banners[ii]+"'></a>";
}
banContent += "</div></div>";
document.getElementById('sliding-logos').innerHTML = banContent;

var actual = document.getElementById('banners');
var move = function(){
    position = actual.offsetLeft;
    position -= 1;
    actual.style.left = position +"px";

    // 3000 is sum of banner's width                
    if (position > -3000) { 
        setTimeout( move, 20);
    }else {
        actual.style.left = "0px";
        move();
    }
};
move();

Answer 1

• 单个图像 Sprite 而不是多个图像
• CSS 转换而不是 JS。 CSS 是浏览器引擎的一部分，不需要修改 DOM 的属性，因此应该更快

这是一个示例(但它不适用于所有浏览器) http://css-tricks.com/infinite-all-css-scrolling-slideshow/