带有下一个/上一个按钮的 CSS/jQuery 全屏幻灯片

Question

我有一个全屏网站，我正在使用 1960 年的 5 个 div，在一个 9800 的容器中，以及一个带有“上一个”和“下一个”按钮的顶部栏。

目标是滑过 1960 年到下一张幻灯片，按钮保持不变。现在我已经完成了所有设置和工作，所有内容都已布置好，基本动画正在运行，但我对一些事情感到好奇；

1. 我想知道如何使用这些按钮，所以当你在第一张幻灯片上时，让它说“回家”和“下一个”，然后说你点击“下一个”，然后新幻灯片进来了，我需要将“回家”改为“上一张”。然后在最后一张幻灯片上，反之亦然。

2. 另外，即使在幻灯片 5 之后，当单击下一步时，我当前如何输入“开始”和“结束”原因，它仍会继续。

当前 jquery：

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

Answer 1

一种可能的解决方案（存在多种解决方案）：

DEMO

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();
         });

     });
 });