jquery 实现上下滚动效果示例代码

复制代码代码如下:
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$（function（） {
var page = 1;
var i = 1;
var conheight = $（".con li"）.height（）;
var lilen = $（"li"）.length;
var len = Math.ceil（ lilen / i ）;
alert（conheight+ " " + len）;
//alert（"page:"+page+" i:"+i+" conheight:"+conheight+" lilen:"+lilen+" len:"+len）
$（".next"）.click（function（） {
if（ page == len）{
alert（"已经到底不能再在操作！"）;
return false;
}
$（".con_list"）.animate（{top:"-=" + conheight},"slow"）;
page++;
//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）{
alert（"已经到头不能再进行操作！"）;
return false;
}
$（".con_list"）.animate（{top:"+=" + conheight},"slow"）;
page--;
//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">
* {
margin:0;padding:0
}
.prev,.next{
width:100px;height:20px;background:#333;cursor:pointer
}
.con{
width:100px;height:300px;overflow:hidden;position:relative
}
.con_list{
position:relative
}
.con li{
height:100px
}
.one{
background:#F90
}
.two {
background:#69C
}
.three{
background:#633
}
</style>
<body>
<div class="prev"></div>
<div class="con">
<div class="con_list">
<ul>
<li class="one">11111111111111111111</li>
<li class="two">22222222222222222222</li>
<li class="three">333333333333333333333</li>
<li class="three">444444444444444444444</li>
<li class="one">5555555555555555555555</li>
<li class="two">6666666666666666666666666</li>
<li class="one">7777777777777777777777777</li>
<li class="two">88888888888888888888</li>
<li class="one">99999999999999999999</li>
<li class="one">10103000000000</li>
</ul>
</div>
</div>
<div class="next"></div>
</body>