0

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

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

  1. 使用按钮，我试图弄清楚如何制作它，所以当你在第一张幻灯片上时，让它说“回家”和“下一张”，然后说你点击“下一张”，新的幻灯片进来了需要将“回家”更改为“以前”。然后在最后一张幻灯片上反之亦然。

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

当前的jQuery：

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

1 回答 1

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

     });
 });
于 2013-03-06T23:03:26.587 回答