Jquery onclick导航上一步按钮

Question

我是Javascript的新手，并尝试实现一个下一步/上一步(循环)按钮到投资组合网站。我设法让“下一步”按钮正确工作，但找不到正确的前一个按钮的方法。我已经尝试了所有的方法，但最终都没有解决方案。

因此，在我的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>

因此，除了我在站点上的任何地方，previous按钮加载.pt-page-2 ( photo.php )中的内容外，一切都正常。

很抱歉我是新来的，我会尽力做到最好。

提前感谢，亲爱的赛博空间。

Answer 1

我不知道这是不是你想要的解决方案...

有一个插件就是为此而设计的。http://jquery.malsup.com/cycle2/

它循环浏览内容，并允许您指定导航链接、过渡效果等。

Answer 2

请查看您的FIDDLE HERE。

$(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)

});