快捷導(dǎo)航

基于jQuery的圖片左右無(wú)縫滾動(dòng)插件

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

基于jQuery的圖片左右無(wú)縫滾動(dòng)插件,需要的朋友可以參考下

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

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

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

您可能感興趣的文章: