Question

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

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

使用按钮我试图弄清楚如何制作它，所以当你在第一张幻灯片上时，它会说“回家”和“下一步”，然后说你点击“下一步”，新的幻灯片进来我需要将“回家”更改为“之前”。然后在最后一张幻灯片上反之亦然。
另外，如果在幻灯片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();
         });

     });
 });

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

1 个答案: