基于jQuery的圖片左右無縫滾動插件

更新時間：2012年05月23日 16:54:15 作者：

基于jQuery的圖片左右無縫滾動插件,需要的朋友可以參考下

在線演示：http://demo.jb51.net/js/2012/myslideLeftRight/
打包下載：http://chabaoo.cn/jiaoben/44973.html
核心代碼:

 
(function($){ 
$.fn.extend({ 
"slidelf":function(value){ 
value = $.extend({ 
"prev":"", 
"next":"", 
"speed":"" 
},value) 
var dom_this = $(this).get(0); //將jquery對象轉換成DOM對象;以便其它函數(shù)中調(diào)用； 
var marginl = parseInt($("ul li:first",this).css("margin-left")); //每個圖片margin的數(shù)值 
var movew = $("ul li:first",this).outerWidth()+marginl; //需要滑動的數(shù)值 
//左邊的動畫 
function leftani(){ 
$("ul li:first",dom_this).animate({"margin-left":-movew},value.speed,function(){ 
$(this).css("margin-left",marginl).appendTo($("ul",dom_this)); 
}); 
} 
//右邊的動畫 
function rightani(){ 
$("ul li:last",dom_this).prependTo($("ul",dom_this)); 
$("ul li:first",dom_this).css("margin-left",-movew).animate({"margin-left":marginl},value.speed); 
} 
//點擊左邊 
$("."+value.prev).click(function(){ 
if(!$("ul li:first",dom_this).is(":animated")){ 
leftani(); 
} 
}); 
//點擊左邊 
$("."+value.next).click(function(){ 
if(!$("ul li:first",dom_this).is(":animated")){ 
rightani(); 
} 
}) 
} 
}); 
})(jQuery) 

思路：
　　點擊左邊--
　　1.將第一個LI向左滑動，滑動的數(shù)值就是LI的寬度。（這里是用負margin-left來實現(xiàn)移動。）
　　2.滑動完成后，將這個LI插入到整個LI的最后一個（實現(xiàn)無縫滾動）
　　點擊右邊--
　　1.將最后一個LI插入到所有LI的第一個，并將其定位到可見區(qū)域之外，（這里用的是margin）
　　2.再將其滑動到可見區(qū)域。
注意：這里的IF判斷語句，是為了防止連續(xù)點擊“左”或“右”的銨鈕，而出現(xiàn)的BUG；
　　這判斷的意思：只有當LI不處于動畫狀態(tài)時，才執(zhí)行移動函數(shù)。只要處于動畫狀態(tài)，點擊時，任何事都不發(fā)生。

您可能感興趣的文章: