我有10页内容，每页使用php完成分页对象。这允许用户通过单击页码来查看他/她希望看到的任何页面的内容。
现在我想添加一个下一个和上一个按钮，允许用户查看下一页或上一页。
使用codef0rmer的指导，我已经为下一个按钮更改为以下jquery代码。当我点击下一个按钮时，后续页面的内容将显示在div内容列中。但是，现在有2个下一个按钮，2个前一个按钮和2个分页对象。
如何在没有额外的下一个，上一个按钮和分页对象的情况下仅显示要显示的内容？
我是jquery的初学者.....我真的很感激任何帮助。
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pg=1;
//$("#contentcolumn:first").show("slide",{'direction':"left"},1000);
$('#next').click(function () {
if(pg<=10){
pg=pg+1;
page_str="page="+pg;
$.get('index2.php',page_str , function(data) {
$('#contentcolumn').html(data).show("slide",{'direction':"left"},1000);
});
};
})//end $('#next').click
})//end document(ready)
</script>
我的HTML和PHP代码：
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div id="leftcolumn">
<div class="innertube">
<input type="button" id="left_but" value="Left" />
</div>
</div>
<div id="contentcolumn">
<div class="innertube">
<?php
$pagination='';
if (function_exists("curl_init")){
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,"http://feeds.feedburner.com/rb286");
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
$data=curl_exec($ch);
curl_close($ch);
//print_r($data);
$doc=new SimpleXmlElement($data);
//$doc=simpleXml_load_file("http://feeds.feedburner.com/rb286?format=xml");
//$doc=simpleXml_load_string($data);
$xml = simplexml_import_dom($doc);
if (!$xml) {
echo 'Error while parsing the document';
exit;
}
//print_r($doc);
}
function paginateFunc($xml){
global $pagination;
$disp_arr = array();
$image_array=array();
// How many adjacent pages should be shown on each side?
$adjacents =3;
$items=$xml->xPath('/rss/channel/item');
$count=count($items);
$total_pages = $count;
/* Setup vars for query. */
$targetpage = "index2.php"; //your file name (the name of this file)
$limit = 1; //how many items to show per page
$page = $_GET['page'];
if($page)
$start = ($page - 1) * $limit; //first item to display on this page
else
$start = 0; //if no page var is given, set start to 0
/* Setup page vars for display. */
if ($page == 0) $page = 1; //if no page var is given, default to 1.
$prev = $page - 1; //previous page is page - 1
$next = $page + 1; //next page is page + 1
$lastpage = ceil($total_pages/$limit); //lastpage is = total pages / items per page, rounded up.
$lpm1 = $lastpage - 1; //last page minus 1
//echo("HALLO");
foreach ($xml->xpath('//item/content:encoded') as $desc) {
preg_match_all('/(?<imgs><img[^>]+>)/m', $desc, $m);
}
foreach($items as $key => $item){
//if( ( $key >= $start) && ($key < $start + $limit) ){
$disp_array[$key]['link']=$item[0]->link;
$disp_array[$key]['title']=$item[0]->title;
$disp_array[$key]['desc']=$item[0]->description;
}//end foreach($items
foreach($disp_array as $key=>$disp){
if($key == $start){
echo("<a href='".$disp_array[$key]['link']."'>".$disp_array[$key]['title']."</a><br>");
echo($disp_array[$key]['desc']."<br>");
//echo(count($m['imgs']));
//echo("<img src='".$m['imgs'][$key]."'/>");
}
}
echo("</div>");//end div innertube
echo("</div>");//end div contentcolumn
echo("<div id='rightcolumn'>");
echo("<div class='innertube'>");
echo("<input type='button' id='right_but' value='Right' />");
echo("</div>");//end div innertube
echo("</div>");
echo("<div id='footer'>");
/*
Now we apply our rules and draw the pagination object.
We're actually saving the code to a variable in case we want to draw it more than once.
*/
//$pagination = "";
if($lastpage > 1)
{
$pagination .= "<div class=\"pagination\">";
//previous button
if ($page > 1)
$pagination.= "<a href=\"$targetpage?page=$prev\">� previous</a>";
else
$pagination.= "<span class=\"disabled\">� previous</span>";
//pages
if ($lastpage < 7 + ($adjacents * 2)) //not enough pages to bother breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
}
elseif($lastpage > 5 + ($adjacents * 2)) //enough pages to hide some
{
//close to beginning; only hide later pages
if($page < 1 + ($adjacents * 2))
{
for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
$pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
}
//in middle; hide some front and some back
elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
{
$pagination.= "<a href=\"$targetpage?page=1\">1</a>";
$pagination.= "<a href=\"$targetpage?page=2\">2</a>";
$pagination.= "...";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>";
$pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";
}
//close to end; only hide early pages
else
{
$pagination.= "<a href=\"$targetpage?page=1\">1</a>";
$pagination.= "<a href=\"$targetpage?page=2\">2</a>";
$pagination.= "...";
for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";
}
}
}
//next button
if ($page < $counter - 1)
$pagination.= "<a href=\"$targetpage?page=$next\">next �</a>";
else
$pagination.= "<span class=\"disabled\">next �</span>";
$pagination.= "</div>\n";
}
}
if (isset($doc->channel)) paginateFunc($doc);
?>
<?php
echo($pagination);
?>
</div><!--closing tag for div footer-->
</div><!--closing tag for div contentwrapper-->
</div><!--closing tag for div maincontainer-->
</body>
</html>
答案 0 :(得分：1)
由于您没有共享大部分代码，我将向您概述如何完成。
我认为你应该隐藏当前的可见内容窗口并找到下一张幻灯片＆amp;展示下。
$('#next').click(function () {
$("div:visible").hide()
.next().show("slide",{'direction':"left"},1000);
});
$('#prev').click(function () {
$("div:visible").hide()
.prev().show("slide",{'direction':"right"},1000);
});
答案 1 :(得分：0)
经过几天的研究，我在http://jc-designs.net/blog/2010/03/jquery-slider-tutorial-for-beginners-how-i-did-mine/....the为初学者找到了关于jquery滑块的很酷的教程，解释是像我这样的假人。
在上述网站的指导下，我设法提出以下代码。我已经将rss feed下载到一个文件中（使用php），创建了下一个和前一个按钮和控制列表 - 用于分页（使用jquery），3列布局 - 固定，液体，固定。
<!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>Untitled Document</title>
<style type="text/css">
body{margin:0;
padding:0;
}
#leftcolumn{
float:left;
margin-right:-200px;
}
#slidecontent{
width:550px;
height:450px;
float:left;
margin:0 200px 0 200px;
border:solid thin #FF3333;
overflow:hidden;
}
#slidewrap{
width:5500px;
height:450px;
top:0;
left:0;
}
.slide{
float:left;
width:550px;
height:450px;
}
#rightcolumn{
float:left;
margin-left:-200px;
}
#controllist{
clear:both;
text-align:center;
padding:4px;
}
ul{
list-style-type:none;
}
ul li{
display:inline;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui/ui/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#controlleft").hide();
var currentPosition=0;
var slideWidth=550;
var count=0;
var html="";
var rss_link="";
var rss_title="";
var rss_desc="";
$.get("rss.xml",function(data){
$(data).find("item").each(function(){
count+=1;
rss_title=$(this).find("title").text();
rss_link=$(this).find("link").text();
rss_desc=$(this).find("description").text();
html+="<div class='slide'><a href='"+rss_link+"'>"+rss_title+"</a>"+rss_desc+"</div>";
}); //end find data
$("#slidewrap").append($(html));
html="<ul>";
for (i=1;i<=count;i++){
if (i<10){
html+="<li><a href='#'>"+i+"</a></li> | ";
}else{
html+="<li><a href='#'>"+i+"</a></li>";
}
}
html+="</ul>";
$("#controllist").append($(html));
});//end get
function controlMechanism(){
if (currentPosition>=9){
$("#controlright").hide();
}else{
$("#controlright").show();
}
if (currentPosition<=0){
$("#controlleft").hide();
}else{
$("#controlleft").show();
}
}//end controlMechanism
//code for next and previous buttons
$(".controls").click(function(event){
event.preventDefault();
if ($(this).attr('id')=="controlright"){
currentPosition+=1;
}else{
currentPosition-=1;
};
$("#slidewrap").animate({"marginLeft" : slideWidth*(-currentPosition)});
controlMechanism();
});//end controls click
//this controls the pagination
$("#controllist ul li").click(function(event){
event.preventDefault();
currentPosition=$(this).index();
$("#slidewrap").animate({"marginLeft" : slideWidth*(-currentPosition)});
controlMechanism();
});// end controllist click
});
</script>
</head>
<body>
<?php
//downloading rss feed into a file
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,"http://feeds.feedburner.com/rb286");
$fp=fopen('rss.xml','w');
curl_setopt($ch,CURLOPT_FILE,$fp);
$data=curl_exec($ch);
curl_close($ch);
fclose($fp);
?>
<div id="leftcolumn">
<a href="#" class="controls" id="controlleft"><</a>
</div>
<div id="slidecontent">
<div id="slidewrap">
</div>
</div>
<div id="rightcolumn">
<a href="#" class="controls" id="controlright">></a>
</div>
<div id="controllist">
</div>
</body>
</html>