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>

所以，无论我在网站上的哪个地方，一切都运行正常，前一个按钮加载.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)

});

Jquery onclick导航上一个按钮

2 个答案: