php - jquery slider : next button, 上一个按钮和分页对象在滑动时显示两次

标签 php jquery css slider

以下 jquery 代码的下一个和上一个按钮工作正常。当用户单击下一个按钮时，后续页面的内容会在 contentcolumn div 中滑动，上一个按钮也会发生同样的情况。但是，contentcolumn 会显示一个额外的下一个、上一个按钮和分页对象。所以，现在有 2 个下一个按钮、2 个上一个按钮和 2 个分页对象。

如何让它只显示 1 个下一个按钮、1 个上一个按钮和 1 个分页对象？

仅供引用，下一个按钮、上一个按钮和分页对象都在 contentcolumn 之外。我的代码:

$(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);
             });
            // event.preventDefault();
             //return false;
          };

    });//end $('#next').click

    $('#prev').click(function(){
        if(pg>1){
            pg=pg-1
            page_str="page="+pg;
            $.get('index2.php',page_str,function(data){
                $('#contentcolumn').html(data).show("slide",{'direction':"right"},1000);
            });
        };
    });

});//end document ready

样式.css

   /* CSS Document */
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}

#topsection{
background-color: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
/*z-index:0;
*/}

#contentcolumn{
margin: 0 200px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
float:left;
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-right:-200px;
background-color: #C8FC98;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background-color: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.mycontent{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}


div.pagination {
    padding: 3px;
    margin: 3px;
}

div.pagination a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #AAAADD;

    text-decoration: none; /* no underline */
    color: #000099;
}
div.pagination a:hover, div.pagination a:active {
    border: 1px solid #000099;

    color: #000;
}
div.pagination span.current {
    padding: 2px 5px 2px 5px;
    margin: 2px;
        border: 1px solid #000099;

        font-weight: bold;
        background-color: #000099;
        color: #FFF;
    }
    div.pagination span.disabled {
        padding: 2px 5px 2px 5px;
        margin: 2px;
        border: 1px solid #EEE;

        color: #DDD;
    }

php代码:

    <div id="maincontainer">
    <div id="contentwrapper">
    <div id="leftcolumn">
    <div class="innertube">
    <form type="post">
    <input type="button" id="prev" value="<"  />
    </form>
    </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'];
            echo("page:".$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 ($m['imgs'] as $img) { 
                    echo("<img src='".$img."'/>");
                    //array_push(image_array,$img);
                } */
             } 
            // $image_array=$m['imgs'];
          // print_r($image_array);
                     //
            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){

                    //if( ( $key >= $start) && ($key < $start + $limit) ){ 
                        echo("key:".$key." start:".$start);
                        //echo("<div class='mycontent'>");
                         echo("<a href='".$disp_array[$key]['link']."'>".$disp_array[$key]['title']."</a><br>");
                         echo($disp_array[$key]['desc']);
                         //echo(count($m['imgs']));
                         //echo("<img src='".$m['imgs'][$key]."'/>");
                         //echo("</div>");
                      }

            } 
            echo("</div>");//end div innertube
            echo("</div>");//end div contentcolumn
            echo("<div id='rightcolumn'>");
            echo("<div class='innertube'>");
            echo("<form type='post'>");
            echo("<input type='button' id='next' value='>' />");
            echo("</form>");
            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-->

最佳答案

当您单击“下一步”或“上一个”时，您必须隐藏原始的#next、#previous，因为您要从 html 响应中返回这些按钮。有点像

$.get('index2.php',page_str,function(data) {
      $('#next').hide();
      $('#previous').hide();
      $('#contentcolumn').html(data).show("slide

",{'direction':"left"},1000);
         });

关于php - jquery slider : next button, 上一个按钮和分页对象在滑动时显示两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11682394/

上一篇：html - 避免在 BlackBerry WebWorks 中选择字段的蓝色

下一篇：asp.net - 在 ASP.NET 中工作时的 CSS 帮助

相关文章：

javascript - 切换点击功能时隐藏ID，再次切换功能时显示？

android - Bootstrap 3 响应不适用于 android internet explorer 的移动设备

java - 记录执行的 java 代码的行号

javascript - 将 json 结果中的 HTML 实体放入输入字段

javascript - 谷歌浏览器 Javascript 调试器

jquery - 可排序，放置在两个列表之间时自动创建新列表

javascript - 与所有浏览器兼容的动画线性渐变

javascript - HTML 连接 img 标签内的跨度

php - 日期时间转换 : "The timezone could not be found in the database"

jQuery 当父元素悬停时触发子元素

©2024 IT工具网  联系我们