返回到下/上一格的JavaScript onclick事件

下面是兩個按鈕返回到下/上一格的JavaScript onclick事件

<button id="Page-Transition" class="btn" id="prev" onClick="loadPreviousPage()"> <-- </button> 
     <button id="Page-Transition" class="btn" onClick="loadNextPage()"> --> </button>

的HTML代碼，這裏是該組的div與父母DIV

<div id="pt-main" class="pt-perspective"> 
    <div class="pt-page pt-page-1" id="page1"><h1><span>A collection of</span><strong>Page</strong> Transitions1</h1></div> 
    <div class="pt-page pt-page-2" id="page2"><h1><span>A collection of</span><strong>Page</strong> Transitions2</h1></div> 
    <div class="pt-page pt-page-3" id="page3"><h1><span>A collection of</span><strong>Page</strong> Transitions3</h1></div> 
    <div class="pt-page pt-page-4" id="page4"><h1><span>A collection of</span><strong>Page</strong> Transitions4</h1></div> 
    <div class="pt-page pt-page-5" id="page5"><h1><span>A collection of</span><strong>Page</strong> Transitions5</h1></div> 
    <div class="pt-page pt-page-6" id="page6"><h1><span>A collection of</span><strong>Page</strong> Transitions6</h1></div> 
</div>

來源

2015-09-06 Cryptonym

你想要什麼來實現呢？通過ajax或循環（顯示/隱藏）divs之間加載頁面？ – joyBlanks

其實我不想加載整個頁面，我希望下一個和上一個按鈕能夠正常工作，這裏是鏈接http://www.jentrifuledev.com/magic-quote/ 正如你所看到的，動畫看起來不錯，但事件繼續進行下一頁。 – Cryptonym

這裏的代碼是一個標準的下一個/上按鈕實現，

$(function() { 
    $("body").on("click", "#prev", function() { 
     var _prev = $(".pt-page.current").prev(); 
     _prev = _prev.length == 0 ? $(".pt-page:last") : _prev; 
      $(".pt-page.current").fadeOut(function() { 
       $(this).removeClass("current"); 
       _prev.fadeIn(function() { 
        $(this).addClass("current"); 
       }); 
      }); 
    }); 

    $("body").on("click", "#next", function() { 
     var _next = $(".pt-page.current").next(); 
     _next = _next.length == 0 ? $(".pt-page:first") : _next; 
      $(".pt-page.current").fadeOut(function() { 
       $(this).removeClass("current"); 
       _next.fadeIn(function() { 
        $(this).addClass("current"); 
       }); 
      }); 
    }); 
});

DEMO

來源

2015-09-06 23:22:28 ocanal

您可以使用相同的功能並選擇任何轉換並循環它們以獲得所需的效果。

function slideShow(mode){ 
 
    if(mode){ 
 
    $('#pt-main .pt-page:visible').eq(0).slideUp(500,function(){ 
 
     $(this).next('.pt-page').slideDown(200); 
 
     $(this).appendTo('#pt-main'); 
 
    }); 
 
    }else{ 
 
    $('#pt-main .pt-page:visible').eq(0).slideUp(500,function(){ 
 
     $('#pt-main .pt-page:last').slideDown(200).prependTo('#pt-main'); 
 
    }); 
 
    } 
 
} 
 

 
$('#pt-main .pt-page').hide().eq(0).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pt-main" class="pt-perspective"> 
 
    <div class="pt-page pt-page-1" id="page1"><h1><span>A collection of</span><strong>Page</strong> Transitions1</h1></div> 
 
    <div class="pt-page pt-page-2" id="page2"><h1><span>A collection of</span><strong>Page</strong> Transitions2</h1></div> 
 
    <div class="pt-page pt-page-3" id="page3"><h1><span>A collection of</span><strong>Page</strong> Transitions3</h1></div> 
 
    <div class="pt-page pt-page-4" id="page4"><h1><span>A collection of</span><strong>Page</strong> Transitions4</h1></div> 
 
    <div class="pt-page pt-page-5" id="page5"><h1><span>A collection of</span><strong>Page</strong> Transitions5</h1></div> 
 
    <div class="pt-page pt-page-6" id="page6"><h1><span>A collection of</span><strong>Page</strong> Transitions6</h1></div> 
 
</div> 
 

 
<button id="Page-Transition" class="btn" id="prev" onClick="slideShow(false)"> &lt;-- </button> 
 
     <button id="Page-Transition" class="btn" onClick="slideShow(true)"> --&gt; </button>

來源

2015-09-06 23:42:56 joyBlanks

返回到下/上一格的JavaScript onclick事件

回答

相關問題