一個簡單的jquery圖片輪播外掛
阿新 • • 發佈:2019-01-06
前提佈局: 左浮li標籤,支援左右切換,自動輪播,原始碼:
引數:ul: 需要動畫的ul prev:上一個切換按鈕 next: 下一個切換按鈕
function rotation(ul, prev, next) { var li = $(ul).find("li"); var liWidth = li.width(); var liLength = $(ul).find("li").length; var interval; $(ul).width(liWidth * liLength); /*上一個按鈕點選*/ $(prev).click(function(){ delay(); animate("prev"); }); /*下一個按鈕點選*/ $(next).click(function(){ delay(); animate("next"); }); /*動畫*/ function animate(direction){ if($(ul).is(":animated")) { return; } if (direction == "next") { $(ul).animate({ left: -liWidth }, 1000, "easeOutSine", function () { //定位回撥成原來狀態 $(ul).append($(ul).find("li:first-child")); $(ul).css({left: 0}); }); } else if (direction == "prev") { //定位 $(ul).prepend($(ul).find("li:last-child")); $(ul).css({left: -liWidth}); //logo圖片動畫 $(ul).animate({ left: 0 }, 1000, "easeOutSine"); } } /*自動輪播*/ function play() { interval = setInterval(function () { animate("next") }, 3000); } play(); /*清除並啟動定時器*/ function delay() { clearInterval(interval); play(); } /*游標懸浮li標籤時清除自動輪播*/ $(li).hover(function(){ clearInterval(interval); },function(){ play(); }); }