<!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" />
<script type="text/javascript" src="jquery.js"></script>
<title>无标题文档</title>
<style type="text/css">
body, input, textarea, select { font-size:12px; font-family:Helvetica, "宋体", Arial, sans-serif; }
body, ul { margin:0; }
ul { padding-left:0; list-style-type:none; }
img { border:0; display:block; }.focusbox { width:320px; height:200px; overflow:hidden; margin:20px auto 0; position:relative; }
.imglist { width:320px; overflow:hidden; position:absolute; }
.imglist li { float:left; width:100%; }
.imglist img { width:320px; height:200px; }
.num { text-align:center; position:absolute; bottom:0; z-index:10; }
.num li { padding:1px 6px; margin-right:3px; background-color:#CCC; color:#FF1890; display:inline; float:left; cursor:pointer; }
.num li.hover { background-color:#FF1890; color:#FFF; }
.loading { position:absolute; left:0; top:0; z-index:11; width:100%; line-height:200px; background-color:#000; text-align:center; color:#F60; }
</style>
<script type="text/javascript">
$().ready(function(){
var imgs=$('.imglist img');
var imgCount=imgs.length;
imgs.load(function(){
imgCount--;
if(imgCount==0){
$('.loading').fadeOut('fast');
start();
}
})
})
</script>
</head><body>
<div class="focusbox">
<div class="loading">Loading...</div>
<ul class="imglist">
<li><a href="#"><img src="http://imgsrc.baidu.com/forum/pic/item/e92078f0c4874bd77831aa52.jpg" /></a></li>
<li><a href="#"><img src="http://imgsrc.baidu.com/forum/pic/item/d705bcb7f072b2ed30add115.jpg" /></a></li>
<li><a href="#"><img src="http://imgsrc.baidu.com/forum/pic/item/e72b11d8a835851633fa1c2b.jpg" /></a></li>
<li><a href="#"><img src="http://imgsrc.baidu.com/forum/pic/item/502943666c0a3d00aa184c71.jpg" /></a></li>
<li><a href="#"><img src="http://hiphotos.baidu.com/%BD%8C%C3%C0%B5%C4%BB%D1%D1%D7/pic/item/f9bdf428dda558a5023bf607.jpg" /></a></li>
<li><a href="#"><img src="http://hiphotos.baidu.com/%D0%F5%CF%E3%B2%DD/pic/item/4e1d6cf1a6c44deca50f527c.jpg" /></a></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script type="text/javascript">
var set_time = 3000, set_fast = 400;
var img_length = $('.imglist li').size();
var img_height = $('.imglist li').height();
var ul_height = img_length*img_height;
$('.imglist').css('bottom','0');
$('.num li').eq(0).addClass('hover');
function posbtm(){
var btm_value = -parseInt($('.imglist').css('bottom'));
var pos_value = btm_value + img_height;
var h_index = btm_value / img_height + 1;
$('.hover').removeClass('hover');
if(h_index != img_length){
$('.num li').eq(h_index).addClass('hover')
}else{
$('.num li').eq(0).addClass('hover')
}
if(pos_value != ul_height){
$('.imglist').animate({'bottom':-pos_value+'px'},set_fast)
}else{
$('.imglist').animate({'bottom':0},set_fast)
}
}
$('.num li').click(function(){
$('.hover').removeClass('hover');
$(this).addClass('hover');
var thisindex = $(this).index();
var pos_value = thisindex * img_height;
if(pos_value != ul_height){
$('.imglist').animate({'bottom':-pos_value+'px'},set_fast)
}else{
$('.imglist').animate({'bottom':0},set_fast)
}
})
function start(){
time = setInterval('posbtm()',set_time);
$('.focusbox').hover(function(){
clearInterval(time)
},function(){
time = setInterval('posbtm()',set_time)
})
}
</script>
</body>
</html>
写出来的时候还是相当有成就感的，我估计差不多每个人都是吧，自己的第一个小插件，现在还有几个问题我想问问：
1、如何将这些js代码封装为一个方法，变量什么的都包含进去，现在有好几个全局变量。
2、从第一个到最后一个都是从上往下压的效果，但是从最后一个到第一个的时候，是从下到上的效果了，现在我想让它自动换的时候都是从上到下的效果，该怎么写？
3、代码需要改进的地方。
把jQuery的路径换成这个，直接复制粘贴就可以看了。
http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082409164031.zip
这个是从右到左的切换，最后一张还是从右到左，不是返回去的。