jQuery onclick導航上一個按鈕

Question

我是Java語言的新手，請嘗試對投資組合網站實施下一個/上一個（循環）按鈕。 我設法使“下一個”按鈕正常工作，但是找不到正確的上一個按鈕的方法。 我嘗試了一切，但最終沒有解決方案。

依此類推，在我的HTML部分中，我有那些類，其中我根據菜單+按鈕來加載其他文件：

<button class="paginate pt-trigger2"><i>PREVIOUS</button>
<button class="paginate pt-trigger3"><i>NEXT</button> 

<div class="pt-page pt-page-2" id="cadrage"><div class=contiennement> </div></div>
<div class="pt-page pt-page-3" id="cadrage"><div class="contiennement"> </div></div>

在Jquery方面，這是我包含的腳本：

<script>

$(document).ready(function(){
var arr = ["home.php","photo.php","websites.php","identity.php","illustration.php","about.php"];

var index = 1;  

var pagess = [".pt-page-1",".pt-page-2",".pt-page-3",".pt-page-4",".pt-page-5",".pt-page-6"];

$('.pt-trigger2').click(function(){ 
 $(".pt-page").html("");
 $('.pt-page').fadeIn(500);
     $(pagess[index]).load(arr[index]); 
    index = (index-1) % arr.length ;
 });

  $('.pt-trigger3').click(function(){ 
 $(".pt-page").html("");
$('.pt-page').fadeIn(500);
    $(pagess[index]).load(arr[index]); 
    index = (index+1) % arr.length ;
 });

});
<script>

如此一來，無論我在網站上的什么地方，一切都可以正常工作，上一個按鈕將加載.pt-page-2（photo.php）中的內容

很抱歉，我努力做到最好。

預先感謝親愛的網絡空間。

Answer 1

我不知道這是否是您想要的解決方案...

有一個專門用於執行此操作的插件。 http://jquery.malsup.com/cycle2/

它遍歷內容，並允許您指定導航鏈接，過渡效果等。

Answer 2

請在此處檢查您的FIDDLE 。

$(document).ready(function () {

    var pageArray = ["home.php", "photo.php", "websites.php", "identity.php", "illustration.php", "about.php"];

    var currentPage = 0,

        loadPage = function (pageNum) {

            var pageArrayLength = pageArray.length;

            $('.pt-trigger:disabled').prop('disabled', false);

            if (pageNum <= 0) {
                pageNum = 0;
                $('.pt-trigger_prev').prop('disabled', true)
            }

            if (pageNum >= pageArrayLength - 1) {
                pageNum = pageArrayLength - 1;
                $('.pt-trigger_next').prop('disabled', true)
            }

            //Edit this part as you wish
            $('#cadrage').html('The contents of ' + pageArray[pageNum] + ' will be loaded here');


            //Until Here

            currentPage = pageNum;
        };

    $('.pt-trigger_prev').on('click', function () {
        loadPage(currentPage - 1)
    });

    $('.pt-trigger_next').on('click', function () {
        loadPage(currentPage + 1)
    });

    loadPage(currentPage)

});