Question

我正在进行幻灯片放映，表中的所有单元格都是使用javascript不可见的。我想要一个按钮，只需在单击时连续显示另一个单元格。

这是我的代码：

window.onload = umYeahThisIsAFunction;

function umYeahThisIsAFunction() {

  var slide = 1;

  var A1 = document.getElementById('A1');

  A1.style.visibility = "hidden";

  var A2 = document.getElementById('A2');

  A2.style.visibility = "hidden";

  var A3 = document.getElementById('A3');

  A3.style.visibility = "hidden";

  var A4 = document.getElementById('A4');

  A4.style.visibility = "hidden";

  var A5 = document.getElementById('A5');

  A5.style.visibility = "hidden";

  var A6 = document.getElementById('A6');

  A6.style.visibility = "hidden";

  var A7 = document.getElementById('A7');

  A7.style.visibility = "hidden";

  var A8 = document.getElementById('A8');

  A8.style.visibility = "hidden";

  var A9 = document.getElementById('A9');

  A9.style.visibility = "hidden";

  var A10 = document.getElementById('A10');

  A10.style.visibility = "hidden";

}



function showSlide() {

    if (slide = 1) {

      var B1 = document.getElementById('A1');

      B1.style.visibility = "visible";
      slide = 2;

    } else {

      if (slide = 2) {

        var B2 = document.getElementById('A2');

        B2.style.visibility = "visible";
        slide = 3;

      } else {

        if (slide = 3) {

          var B3 = document.getElementById('A3');

          B3.style.visibility = "visible";
          slide = 4;

        } else {

          if (slide = 4) {

            var B4 = document.getElementById('A4');

            B4.style.visibility = "visible";
            slide = 5;

          } else {

            if (slide = 5) {

              var B5 = document.getElementById('A5');

              B5.style.visibility = "visible";
              slide = 6;

            } else {

              if (slide = 6) {

                var B6 = document.getElementById('A6');

                B6.style.visibility = "visible";
                slide = 7;
              } else {

                if (slide = 7) {

                  var B7 = document.getElementById('A7');

                  B7.style.visibility = "visible";
                  slide = 8;

                } else {

                  if (slide = 8) {

                    var B8 = document.getElementById('A8');

                    B8.style.visibility = "visible";
                    slide = 9;

                  } else {

                    if (slide = 9) {

                      var B9 = document.getElementById('A9');

                      B9.style.visibility = "visible";
                      slide = 10;

                    } else {

                      var B10 = document.getElementById('10');

                      B10.style.visibility = "visible";

                    }

                  }

<!DOCTYPE html>
<html>

<head></head>

<body>

  <table>

    <tr>

      <td>

        <table>

          <tr>

            <td width="1000" height="75" bgcolor="FF0000" id="A1">

            </td>

          </tr>

          <td width="1000" height="75" bgcolor="FFA500" id="A2">

          </td>

    </tr>

    <tr>

      <td width="1000" height="75" bgcolor="FFFF00" id="A3">

      </td>

    </tr>

    <tr>

      <td width="1000" height="75" bgcolor="00FF00" id="A4">

      </td>

    </tr>

    <tr>

      <td width="1000" height="75" bgcolor="turquoise" id="A5">

      </td>

    </tr>

    <tr>

      <td width="1000" height="75" bgcolor="0000FF" id="A6">

      </td>

    </tr>

    <tr>

      <td width="1000" height="75" bgcolor="FF1493" id="A7">

      </td>

    </tr>

    <tr>

      <td width="1000" height="75" bgcolor="FF00FF" id="A8">

      </td>

    </tr>

    <tr>

      <td width="1000" height="75" bgcolor="FFaf00" id="A9">

      </td>

    </tr>

    <tr>

      <td width="1000" height="75" bgcolor="5a3600" id="A10">

      </td>

    </tr>

    </table>

    </td>

    <td>

      <table>

        <tr>

          <td height="75" bgcolor="ff0000" valign="top" align="right" style="position: fixed">

            <button type="button" onclick="showSlide()">Next</button>

          </td>

        </tr>

      </table>

    </td>

    </tr>

  </table>

</body>

</html>

对不起，我把整个代码放进去了。我还想明确表示，我希望表格单元格消失的唯一时间是onload。

Answer 1

也许这就是你要找的东西：

<button onclick="showNext()">Show Next</button>

<script type="text/javascript">
    var cLetter = "A";
    var cNumber = "1";

    function showNext() {
        var NextCell = document.getElementById( cLetter + cNumber );
        NextCell.style.visibility = "visible";
        cNumber++;
    }
</script>

javascript幻灯片放映一次打开所有幻灯片

1 个答案: