效果如下所示：
花一點點時間整理了下類似這上下滾動的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>
</head>
<script src="../jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
var page = 1;
var i = 3;
var conheight = $('.con').height();
var lilen = $('li').length;
var len = Math.ceil( lilen / i );
$('.next').click(function() {
if( page == len ) {
$('.con_list').animate({top:0},'slow');
page = 1;
}else{
$('.con_list').animate({top:'-=' + conheight},'slow');
page++;
}
});
$('.prev').click(function() {
if( page == 1 ) {
$('.con_list').animate({top:'-=' + conheight*(len - 1)},'slow');
page = len;
}else{
$('.con_list').animate({top:'+=' + conheight},'slow');
page--;
}
});
})
</script>
<style type="text/css">
body,ul,li {
margin:0;
padding:0;
list-style:none outside none;
}
.prev, .next {
width:95px;
height:22px;
cursor:pointer;
margin-left:5px;
}
.prev {
background:url(images/imgbut.gif) no-repeat scroll left top;
}
.next {
background:url(images/imgbut.gif) no-repeat scroll left top;
background-position:0 -22px;
}
.con {
width:105px;
height:244px;
overflow:hidden;
position:relative
}
.con_list {
position:relative
}
.con li {
background:url(images/list_imgBg.jpg) no-repeat scroll left top;
height:68px;
padding:5px 7px;
width:89px;
margin:3px 0px;
}
</style>
<body>
<div class="prev"></div>
<div class="con">
<div class="con_list">
<ul>
<li><img src="images/1.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/2.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/3.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/1.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/2.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/3.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/1.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/2.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/3.jpg" width="89" height="63" alt="" /></li>
<li><img src="images/1.jpg" width="89" height="63" alt="" /></li>
</ul>
</div>
</div>
<div class="next"></div>
</body>
</html>
list_imgBg.jpg
imgbut.gif
1.jpg
2.jpg
3.jpg
參考網站案例：http://css3html5.org/js/jQuery/2010/1020/1377.html