0

1960年に5divで作業しているフルスクリーンサイトが9800のコンテナ内にあり、「前へ」と「次へ」ボタンがあるトップバーがあります。

目標は、ボタンを一定に保ちながら、1960年から次のスライドにスライドすることです。これで、すべてのセットアップと作業が完了し、すべてがレイアウトされ、基本的なアニメーションが機能しましたが、いくつかのことに興味がありました。

  1. ボタンを使って、最初のスライドで「家に帰る」と「次へ」と言ってから「次へ」をクリックすると、新しいスライドが入ってくるようにする方法を見つけようとしています。 「帰国」を「前」に変更する必要があります。次に、最後のスライドでその逆。

  2. また、スライド5を実行した後でも、[次へ]をクリックすると、現在「開始」と「終了」の原因をどのように入力すればよいでしょうか。

現在のjquery：

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

1 に答える 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 に答える