<p><a class="left" href="#" mce_href="#">1</a> <a class="right" href="#" mce_href="#">2</a></p> <div class="box"> <ul class="ClearFix"> <li>111111111111</li> <li>222222222222</li> <li>3333</li> <li>44444</li> <li>555555</li> <li>666666</li> </ul> </div> *,html,body{ margin:0; padding:0; } .box{ width:205px; overflow:hidden; } ul{ list-style:none; width:1000px; position:relative; } ul li{ float:left; width:100px; border:1px #FF0000 solid; } .ClearFix:after{ display: block; clear: both; height: 0; visibility: hidden; content: "."; } .ClearFix{ display: inline-block; } /* Hides from IE 4-6 /*/ * html .ClearFix, * html{ height: 1%; } .ClearFix{ display: block; } $(function(){ var page=1; var i=2; var len=$("ul li").length; var count=Math.ceil(len/i); var wid=$(".box").width(); var $box=$("ul"); $(".right").click(function(){ if(!$box.is(":animated")){ if(page==count){ $box.animate({ left : 0}, 800); //通过改变left值,跳转到第一个版面 page = 1; } else{ $box.animate({ left : '-='+wid}, 800); //通过改变left值,达到每次换一个版面 page++; } } }) $(".left").click(function(){ if( !$box.is(":animated") ){ if( page == 1 ){ //已经到第一个版面了,如果再向前,必须跳转到最后一个版面。 $box.animate({ left : '-='+wid*(count-1)}, 800); //通过改变left值,跳转到最后一个版面 page = page_count; }else{ $box.animate({ left : '+='+wid }, 800); //通过改变left值,达到每次换一个版面 page--; } } }) })