(function($){
$.fn.extend({
"slidelf":function(v){
v = $.extend({
"L":"",
"R":"",
"S":"",
"O":"ul",
"I":"li"
},v);
var $$ = $(this).get(0); //將jquery對象轉換成DOM對象;以便其它函數中調用；
var marginl = parseInt($(v.O+" "+v.I+":first",this).css("margin-left")); //每個圖片margin的數值
var movew = $(v.O+" "+v.I+":first",this).outerWidth()+marginl; //需要滑動的數值
//點擊左邊
$(v.L).click(function(){
if(!$(v.O+" "+v.I+":first",$$).is(":animated")){
$(v.O+" "+v.I+":first",$$).animate({"margin-left":-movew},v.S,function(){
$(this).css("margin-left",marginl).appendTo($(v.O,$$));
});
}
});
//點擊右邊
$(v.R).click(function(){
if(!$(v.O+" "+v.I+":first",$$).is(":animated")){
$(v.O+" "+v.I+":last",$$).prependTo($(v.O,$$));
$(v.O+" "+v.I+":first",$$).css("margin-left",-movew).animate({"margin-left":marginl},v.S);
}
})
}
});
})(jQuery);註釋："L":"", "R":"","S":"","O":"ul","I":"li"
L是對應向左那個元素
R是對應向右那個元素
S是設置滾動的秒數，單位是毫秒
O是外面的名稱
I是內部的名稱
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Menu Effect</title>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" language="javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="slidelf.js"></script>
<script type="text/javascript">
$(function(){
$(".fl-pic").slidelf({
"L":".left-arrow",
"R":".right-arrow",
"S":1000
});
});
</script>
<style type="text/css">
</style>
</head>
<body><div class="friend-Link">
<div class="left-arrow"><a href="#">左邊箭頭</a></div>
<div class="fl-pic">
<ul>
<!-- 圖片友情鏈接 -->
<li><img src="images/fr-logo-01.gif" alt="" /></li>
<li><img src="images/fr-logo-02.gif" alt="" /></li>
<li><img src="images/fr-logo-03.gif" alt="" /></li>
<li><img src="images/fr-logo-04.gif" alt="" /></li>
<li><img src="images/fr-logo-05.gif" alt="" /></li>
<li><img src="images/fr-logo-06.gif" alt="" /></li>
<li><img src="images/fr-logo-07.jpg" alt="" /></li>
<li><img src="images/fr-logo-08.jpg" alt="" /></li>
</ul>
</div>
<div class="right-arrow"><a href="#">右邊箭頭</a></div>
</div>
</body>
</html>
