1

turnjs プラグインを使用してフリップブック コンテンツを作成しました。さらに、ユーザーがフリップブックをより適切にナビゲートできるように、2 つのナビゲーション ボタンを追加しました。左矢印 (前のスライド)、右矢印 (次のスライド)。

さらに、フリップブックを介してナビゲーション矢印を実装するために、次の機能を設定しました。

1.) フリップブックの最初のページでは、右矢印のみが表示され、左矢印は非表示になっています

2.) 以降のページには、左矢印と右矢印の両方の矢印が表示されます

3.) ユーザーが最後のページに移動すると、右矢印は非表示になり、左矢印のみが表示されます。

4.) ユーザーが最後のページから戻るとき、したがって、最後のページから前のページに戻ると、両方の矢印が表示されます

5.) ユーザーが最初のページに戻ると、左矢印は非表示になり、右矢印のみが表示されます。

したがって、これらはフリップブックのナビゲーション ボタンの動作を定義する次の機能です。

問題：

機能 3 までのナビゲーション ボタンの機能を設定できます。) したがって、機能 4 から問題が発生します。したがって、ユーザーが最後のページに移動し、最後のページから戻ることを決定した後、右矢印は非表示のままになります。次に、ユーザーが最初のページに戻った後、右矢印は非表示のままですが、左矢印は表示されたままです。

そこで、以下の問題の解決方法についてお聞きしたいです。

コード：

function Models() {
  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    elevation: 130,
    //set initial page
    page: 1,
    //set the number of pages of the flipbook
    pages: 11,
    autoCenter: false
  });
}

function ModelCheckPage(page) {

  if ($("#Model_flipbook").turn("page") > 1 && $("#Model_flipbook").turn("page") < 11) {
    // If the page we are currently on is not the first page, reveal the back button
    $("#Model_LeftSide").removeClass("hidden");
  } else if ($("#Model_flipbook").turn("page") == 11) {
    // If the page we're on is the last page, hide the next button
    $("#Model_RightSide").addClass("hidden");
  }
}

function NextSlide() {
  ModelCheckPage($("#Model_flipbook").turn("next"));
  console.log("next");
}

function PreviousSlide() {
  ModelCheckPage($("#Model_flipbook").turn("previous"));
  console.log("previous");
}
  #Model_LeftSide {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 0px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }
  #Model_RightSide {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 150px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }
  .hidden {
    display: none;
  }
<div id="Models_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:1921px; ">
  <button id="Model_LeftSide" class="hidden" onclick="PreviousSlide()">
    <img src="lib/img/LeftSide.png">
  </button>
  <button id="Model_RightSide" onclick="NextSlide()">
    <img src="lib/img/RightSide.png">
  </button>

  <!--Div part for keynote images-->
  <div id="Model_flipbook" style="position:absolute;">
    <div id="Model_flip_1">
      <img src="lib/img/Model(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/Model(KeyNote)_2.jpeg" />
    </div>
    //.....(mulitple flip pages content).....
  </div>
</div>

4

0 に答える 0