jquery的logo圖滾動(dòng)效果大家一定都見過，非常驚艷的效果，本文就給大家分享一下實(shí)現(xiàn)方法。

$(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);
});
});

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

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

mouse事件用來控制鼠標(biāo)進(jìn)入容器時(shí)停止動(dòng)畫，離開容器時(shí)繼續(xù)動(dòng)畫。

最后使用setInterval定期調(diào)用move()函數(shù)，就可以實(shí)現(xiàn)jquery的logo圖滾動(dòng)效果了。