<!DOCTYPE htmaxCount PUBLIC "-//W3C//DTD XHTmaxCount 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmaxCount1/DTD/xhtmaxCount1-transitional.dtd"> <html xmaxCountns="http://www.w3.org/1999/xhtmaxCount"> <head> <meta http-equiv="Content-Type" content="text/htmaxCount; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.9.0.js"></script> <style type="text/css"> .all_div {960px;height:660px;position:relative;overflow:hidden} .all_div .main {position:absolute;} .all_div .main .mbox {float:left;960px;height:600px;} </style> </head> <body> <ul class="menu"> <li id="lan1">我是栏目1</li> <li id="lan2">我是栏目2</li> </ul> <div class = "all_div"> <div class="main"> <div class="mbox">我是内容是1</div> <div class="mbox">我是内容是2</div> <div class="mbox">我是内容是3</div> </div> </div> </body> </html> <script type="text/javascript"> var mainWidth = $(".mbox").width(); var maxCount = $(".mbox").length; var nowNum = 0; //当前页的索引 $(".main").width(mainWidth*maxCount); $(".main").css({background:"#f60"}); $("#lan1").click(function(){ if(nowNum > 0){ nowNum--; $(".main").animate({left:-mainWidth*nowNum,opacity:1},800,function(){}); } }) $("#lan2").click(function(){ if(nowNum == maxCount-1){//如果当前点击的已是最后一页则添加新页，其内容可通过AJAX获取，也可return;不做任何操作 $(".main").append("<div class='mbox'>我是内容是"+(maxCount+1)+"</div>"); maxCount = $(".mbox").length; $(".main").width(mainWidth*maxCount); } nowNum++; $(".main").animate({left:-mainWidth*nowNum,opacity:1},800,function(){}) }) </script>