jquery的logo圖滾動效果大家一定都見過，非常驚艷的效果，本文就給大家分享一下實現方法。

$(document).ready(function(){
var logos = $(".logos-container");
var logoWidth = logos.width();
var count = logos.children().length;
var totalWidth = count * logoWidth;
logos.css("width", totalWidth);
logos.children().css("width", logoWidth);
var speed = 50;
var current = 0;
function move() {
current += 1;
if (current >logoWidth) {
logos.css("left", "-"+logoWidth+"px");
current = current - logoWidth;
} else {
logos.css("left", "-"+current+"px");
}
}
var interval = setInterval(move, speed);
logos.mouseenter(function() {
clearInterval(interval);
});
logos.mouseleave(function() {
interval = setInterval(move, speed);
});
});

首先定義一個名為logos的div容器，里面放置多張圖片logo，容器的寬度根據logo數量確定，每個logo容器寬度也設置為logo容器總寬度除以logo數量。

接著定義一個函數move()，用來控制每個時間間隔移動一個像素距離，當移動距離超過一個logo容器寬度時，將容器位置設置到第二個logo容器處，current值減去logo容器寬度。

mouse事件用來控制鼠標進入容器時停止動畫，離開容器時繼續動畫。

最后使用setInterval定期調用move()函數，就可以實現jquery的logo圖滾動效果了。