javascript - 使用左右导航按钮选择不同的 div 框架

Question

功能:

用户可以自由地在可用于拍照的 2 个帧之间导航。因此，在第一帧中，当用户单击“向右”按钮时； “向左”按钮被隐藏，第二帧将淡入，而第一帧将淡出。此外，当用户处于第二帧并需要导航回第一帧时，用户会点击“向左”按钮；然后“右”按钮将被隐藏，第二帧将淡出，而第一帧将淡入。

已完成的工作:

我创建了 2 个框架 <div> s 以及左按钮和右按钮的方法调用。

问题:

在第一帧中，左箭头仍然隐藏，因为我已经为左箭头设置了 class="hidden"。但是，当用户导航到第二帧时，左箭头仍然“隐藏”，而右箭头在应该隐藏时仍然“显示”。

因此，如何设置两帧的条件检查，以便当用户导航到第二帧时，“右”箭头被隐藏，仅显示“左箭头”，而在第一帧中，“右”箭头显示，“左”箭头隐藏。

function Left() {
  $('#Photoframe02').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Photoframe02').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#Photoframe01').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#Photoframe01').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });
}

function Right() {
  $('#Photoframe01').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Photoframe01').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#Photoframe02').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#Photoframe02').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });
}

//I think this is a wrong method call to check frame, as both IDs are different
function CheckFrame(page) {

  if ($("#Photoframe01").turn("page") = 2) {
    // If the page we are currently on is not the first page, reveal the back button
    $("#LeftSide").removeClass("hidden");
    $("#RightSide").addClass("hidden");
    console.log("RoleModels LeftSide is shown");
  }
}

.hidden {
  display: none;
}

<div id="Active_Camera" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=5; top:0px; left:0px; ">

  <img id="Photoframe01" class="hidden" style=" position:absolute; width:1920px; height:1080px; z-index:5; top:0px; left:0px;" src="lib/img/Photoframe01.png" />
  <img id="Photoframe02" style=" position:absolute; width:1920px; height:1080px; z-index:5; top:0px; left:1921px;" src="lib/img/Photoframe02.png" />
  <button id="LeftButton" onclick="Left()">
    <img style="width: 250px; height:250px" src="lib/img/Nav/Left.png">
  </button>
  <button id="RightButton" onclick="Right()">
    <img style="width: 250px; height:250px" src="lib/img/Nav/Right.png">
  </button>
</div>

Answer 1

我已经解决了我自己的问题。

我采用了将索引附加到每个导航按钮的方法。其次，我将可用的帧放入一个数组中，以便可以从列表中调用它。因此，我发现这种方法更简单、更干净。

var selectedFrameIndex = 1;

var framelist = ["Photoframe01.png", "Photoframe02.png", , "Photoframe03.png", , "Photoframe04.png"];

function selectFrame(flag) {
  if (flag == "1") {
    selectedFrameIndex--;

  } else if (flag == "2") {
    selectedFrameIndex++;
  }
  if (selectedFrameIndex <= 0) {
    selectedFrameIndex = framelist.length;
  } else if (selectedFrameIndex > framelist.length) {
    selectedFrameIndex = 1;
  }
  $("#Photoframe").attr("src", "lib/Photoframe0" + selectedFrameIndex + ".png");
}

<div>
  <img id="Photoframe" class="hidden" style=" position:absolute; width:1920px; height:1080px; z-index:6; top:0px; left:0px; display: inline-block; " src="lib/Photoframe01.png" />

  <table cellspacing="0" cellpadding="0" width="1080" id="photo_stream">
    <tr>
      <td width="1080">
        <canvas id="canvas" width="1920" height="1080" style="position:absolute; z-index:5; top:0; left:0; margin:auto; display:none;"></canvas>

        <button id="CameraActiveButton" onclick="TakePicture()">
          <img src="lib/img/PAGE04/SNAPNOW.png">
        </button>

        <button id="LeftButton" onclick="selectFrame('2')">
          <img style="width: 250px; height:250px" src="lib/img/PAGE04/Nav/Left.png">
        </button>
        <button id="RightButton" onclick="selectFrame('1')">
          <img style="width: 250px; height:250px" src="lib/img/PAGE04/Nav/Right.png">
        </button>
      </td>
    </tr>
  </table>
</div>