<div class="codetitle"> <span><a style="CURSOR: pointer" data="67132" class="copybut" id="copybut67132" onclick="doCopy('code67132')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code67132"> <br><script type="text/javascript" src="script/jquery-1.7.2.min.js"></script> <br><script type="text/javascript"> <BR>$(function() { <BR>var page = 1; <BR>var i = 1; <BR>var conheight = $('.con li').height(); <BR>var lilen = $('li').length; <BR>var len = Math.ceil( lilen / i ); <BR>alert(conheight+ " " + len); <BR>//alert("page:"+page+" i:"+i+" conheight:"+conheight+" lilen:"+lilen+" len:"+len) <BR>$('.next').click(function() { <BR>if( page == len){ <BR>alert("已经到底不能再在操作!"); <BR>return false; <BR>} <BR>$('.con_list').animate({top:'-=' + conheight},'slow'); <BR>page++; <BR>//if( page == len ) { <BR>// $('.con_list').animate({top:0},'slow'); <BR>// page = 1; <BR>// }else{ <BR>// $('.con_list').animate({top:'-=' + conheight},'slow'); <BR>// page++; <BR>//} <BR>}); <BR>$('.prev').click(function() { <BR>if(page == 1){ <BR>alert("已经到头不能再进行操作!"); <BR>return false; <BR>} <BR>$('.con_list').animate({top:'+=' + conheight},'slow'); <BR>page--; <BR>//if( page == 1 ) { <BR>// $('.con_list').animate({top:'-=' + conheight*(len - 1)},'slow'); <BR>// page = len; <BR>//}else{ <BR>// $('.con_list').animate({top:'+=' + conheight},'slow'); <BR>// page--; <BR>//} <BR>}); <BR>}) <BR></script> <br><style type="text/css"> <BR>* { <BR>margin:0;padding:0 <BR>} <BR>.prev,.next{ <BR>width:100px;height:20px;background:#333;cursor:pointer <BR>} <BR>.con{ <BR>width:100px;height:300px;overflow:hidden;position:relative <BR>} <BR>.con_list{ <BR>position:relative <BR>} <BR>.con li{ <BR>height:100px <BR>} <BR>.one{ <BR>background:#F90 <BR>} <BR>.two { <BR>background:#69C <BR>} <BR>.three{ <BR>background:#633 <BR>} <BR></style> <br> <br><div class="prev"></div> <br><div class="con"> <br><div class="con_list"> <br><ul> <br><li class="one">11111111111111111111</li> <br><li class="two">22222222222222222222</li> <br><li class="three">333333333333333333333</li> <br><li class="three">444444444444444444444</li> <br><li class="one">5555555555555555555555</li> <br><li class="two">6666666666666666666666666</li> <br><li class="one">7777777777777777777777777</li> <br><li class="two">88888888888888888888</li> <br><li class="one">99999999999999999999</li> <br><li class="one">10103000000000</li> <br> </ul> <br> </div> <br> </div> <br><div class="next"></div> <br> <br> </div>