Question

功能性：

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

已完成的工作：

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

问题：

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

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

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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用向左和向右导航按钮选择不同的div帧

1 个答案: