JS 實現自定義滾動效果
阿新 • • 發佈:2019-01-02
var timer = null; //獲得當前滾動盒子scrollBox var ulList = $(".scroll ul.scrollBox"); //獲得當前scrollBox裡面滾動元素的個數 var ulNum = $(".scroll ul.scrollBox").children("li").length; if (ulNum > 2) { timer = setInterval(function() { scrollList(ulList); }, 4000); //滑鼠經過清空定時器 ulList.hover(function() { clearInterval(timer); }).mouseleave(function(){ timer = setInterval(function() { scrollList(ulList); }, 4000); }) } //滾動動畫 function scrollList(obj) { //獲得當前<li>的邊距大小 var scrollMargin= parseInt($("ul.scrollBox li:first-child").css('marginRight')); //獲得當前<li>的高度 var scrollHeight = $("ul.scrollBox li:first").width() + scrollMargin; //滾動出一個<li>的高度+邊距 obj.stop().animate({ marginLeft: -(scrollHeight+scrollMargin) }, 2000, function() { //動畫結束後,將當前<ul>margin置為初始值0狀態,再將第一個<li>拼接到末尾。 obj.css({ marginLeft: 0 }).find("li:first").appendTo(obj); }); }