CSS/jQuery全屏滑动与下一步/上一步按钮

Question

我有一个全屏网站，我在一个9800的容器内，在1960与5div一起工作，顶部栏有一个"上一个"one_answers"下一个"按钮。

目标是在按钮保持不变的情况下从1960滑动到下一张幻灯片。现在我已经把所有的东西都设置好了，所有的东西都布置好了，基本的动画正在工作，但是我对一些事情很好奇;

1. 有了按钮，我想弄清楚如何使它，所以当你在第一张幻灯片上有它说"回家"one_answers"下一个"，然后说你点击"下一步"，新的幻灯片进来，我需要把"回家"改为"上一个"。在最后一张幻灯片上，反之亦然

2. 另外，我如何在"开始"one_answers"结束"，因为目前当点击下一步时，即使在幻灯片5之后，它将继续前进。

当前jquery:

$(document).ready(function () {
    $(".next_p").click(function () {
        $("#projects").animate({
            marginLeft: "-=1960px"
        });
    });
});

Answer 1

一个可能的解决方案(存在许多解决方案):

Html

<a href="#" class="prev_p">Previous</a>
<a href="#" class="start">Start</a>
<a href="#" class="next_p">Next</a>
    <div id="projects">
        <div class="slide gray"></div>
        <div class="slide white"></div>
        <div class="slide black"></div>
        <div class="slide gray"></div>
        <div class="slide white"></div>
        <div class="slide black"></div>
    </div>

CSS

#projects {
    position:relative;
    float:left;
    width:9800px;
    height:300px;
    overflow:hidden;
}
.slide {
    position:relative;
    float:left;
    border:1px solid black;
    width:1960px;
    height:300px;
}
.gray {
    background-color:gray;
}
.white {
    background-color:white;
}
.black {
    background-color:black;
}

jQuery

$(function () {
     $(".prev_p").hide();
     $(".start").hide();
     var slidewidth = 1960; //in Pixels
     var animationSpeed = 300; //in Milliseconds
     //start page
     $(".start").click(function () {
         $("#projects").animate({
             marginLeft: "0px"
         }, animationSpeed, function () {
             $(".start").hide();
             $(".prev_p").hide();
             $(".next_p").show();
         });
     });
     //next page
     $(".next_p").click(function () {
         $("#projects").animate({
             marginLeft: "-=" + slidewidth + "px"
         }, animationSpeed, function () {
             //check location after animation and hide controls
             //that no longer serve a purpose and add those that do
             var marginLeft = $("#projects").css("margin-left");
             var numberOfSlides = 5;
             if (marginLeft == "-" + (slidewidth * (numberOfSlides - 2)) + "px") {
                 $(".next_p").hide();
             }
             if (marginLeft != "0px") $(".start").show();
             else $(".start").hide();
             $(".prev_p").show();
         });
     });
     //previous page
     $(".prev_p").click(function () {
         $("#projects").animate({
             marginLeft: "+=" + slidewidth + "px"
         }, animationSpeed, function () {
             //check location after animation and hide controls
             //that no longer serve a purpose and add those that do
             var marginLeft = $("#projects").css("margin-left");
             if (marginLeft == "0px") {
                 $(".prev_p").hide();
                 $(".start").hide();
             } else {
                 $(".start").show();
             }
             $(".next_p").show();
         });
     });
 });