jquery图片列表左右切换插件

最近公司项目中平凡的使用到了图片列表左右滚动的效果~

上午来到公司，写了一个基于jquery的图片滚动插件，这个是我在博客园的第一篇技术随笔，哈哈，激动哦，代码不管咋样，贴上来给自己留个纪念，哈哈！

<!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>无标题文档</title>
<script type="text/javascript" src="http://ayoubg.sinaapp.com/include/lib/js/jquery/jquery-1.2.6.js"></script>
</head>
<style>
*{ margin:0; padding:0;}
ul,li,ol,dd,dt{ list-style:none;}
#scroll-box2{ width:100px; height:320px; margin-bottom:400px; overflow:hidden;}
#scroll-box2 ul li{ float:none; width:100px; height:110px;}
#scroll-box2 ul li span{width:100px; height:110px;}
#scroll-box2 ul li img{ width:96px; height:96px;}
#scroll-box2 ul{width:100px; height:auto; position:absolute; left:0; top:0;}
.scroll-box{width:330px; height:100px; position:relative; margin:30px 0 0 300px; overflow:hidden;}
.scroll-box ul{ position:absolute; left:0; top:0; width:9999px;}
.scroll-box ul li{width:110px; height:100px; float:left;}
.scroll-box ul li span{ display:block; width:100px; height:100px; background:#ccc; text-align:center; line-height:100px; color:#fff; font-size:60px; margin: 0 auto;}
.scroll-box ul li span img{ width:96px; border:2px solid #000;}
</style>
<body>
<script type="text/javascript">
jQuery.scrollPic = function(options){
var defaults = {
box : $(\'#scroll-ul\'),
slen : 3,
speed:400,
prev:$(\'#prev\'),
next:$(\'#next\'),
dire:\'left\'
};
var opt = $.extend(defaults,options);
var ul = opt.box;
var li = ul.children();
var num = opt.slen;
var len = li.length;
var w = li.eq(0).width();
var h = li.eq(0).height();
var isAnimated = true;
var autoWidth =function(){
ul.css(\'width\',ul.children().length*w+\'px\');
}
switch(opt.dire){
case \'left\':
autoWidth();
break;
case \'up\':
li.css(\'float\',\'none\');
opt.box.css({
width:w+\'px\',
top:0
});
break;
}
if(len > num){
opt.next.click(function(){
if(isAnimated){
isAnimated = false;
switch(opt.dire){
case \'left\':
var li = ul.children();
for(var i=0; i < num; i++){
ul.append(li.eq(i).clone(true,true));
autoWidth();
}
ul.animate({
left: -w*num+\'px\'
},opt.speed,function(){
ul.find(\'li:gt(\'+(len-1)+\')\').remove();
for(var i=0; i < num; i++){
ul.append(li.eq(i));
ul.css(\'left\',0);
}
isAnimated = true;
});
break;
case \'up\':
var li = ul.children();
for(var i=0; i < num; i++){
ul.append(li.eq(i).clone(true,true));
}
ul.animate({
top: -h*num+\'px\'
},opt.speed,function(){
ul.find(\'li:gt(\'+(len-1)+\')\').remove();
for(var i=0; i < num; i++){
ul.append(li.eq(i));
ul.css(\'top\',0);
}
isAnimated = true;
});
break;
}
}
});
}
if(len > num){
opt.prev.click(function(){
if(isAnimated){
isAnimated = false;
switch(opt.dire){
case \'left\':
var li = ul.children();
for(var i=1; i<=num; i++){
ul.prepend(li.eq(len-i).clone(true,true));
autoWidth();
ul.css(\'left\',-w*num+\'px\');
}
ul.animate({
left:0
},opt.speed,function(){
var li = ul.children();
for(var i=0; i<=num; i++){
ul.find(\'li:gt(\'+(len-1)+\')\').remove();
}
isAnimated = true;
});
break;
case \'up\':
var li = ul.children();
for(var i=1; i<=num; i++){
ul.prepend(li.eq(len-i).clone(true,true));
ul.css(\'top\',-h*num+\'px\');
}
ul.animate({
top:0
},opt.speed,function(){
var li = ul.children();
for(var i=0; i<=num; i++){
ul.find(\'li:gt(\'+(len-1)+\')\').remove();
}
isAnimated = true;
});
break;
}
}
});

}
}

$.scrollPic({
box : $(\'#scroll-ul\'),
slen : 3,
speed:500,
prev:$(\'#prev\'),
next:$(\'#next\'),
dire:\'left\'
});

$.scrollPic({
box : $(\'#scroll-ul2\'),
slen : 3,
speed:400,
prev:$(\'#prev2\'),
next:$(\'#next2\'),
dire:\'up\'
});
});
</script>

</body>
</html>