Question

我正在尝试使用Javascript代码进行div幻灯片演示。基本上，我想在隐藏div2时显示div1（反之亦然），同时可见div的所有子元素也可见。

现在，它只是以线性方式遍历整个4个div组并循环回来。我希望能够单击4个按钮中的一个来选择照片的子部分（如风景，野生动物等）。此外，按钮本身没有正确调用它所代表的div。

CSS：

.container {
  max-width: 567px;
  max-height: 363px;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: inherit;
}

.container div {
  background-color: white;
  width: 100%;
  display: inline-block;
}

.container img {
  width: 100%;
  height: auto;
}

HTML：

<td colspan="4" rowspan="7">
  <div class="container">
    <div id="wildlife">
      <img class="mySlides" src="images/wildlife1.jpg" style="width:100%">
      <img class="mySlides" src="images/wildlife2.jpg" style="width:100%">
      <img class="mySlides" src="images/wildlife3.jpg" style="width:100%">
      <img class="mySlides" src="images/wildlife4.jpg" style="width:100%">
    </div>
    <div id="landscape">
      <img class="mySlides" src="images/landscape1.jpg" style="width:100%">
      <img class="mySlides" src="images/landscape2.jpg" style="width:100%">
      <img class="mySlides" src="images/landscape3.jpg" style="width:100%">
      <img class="mySlides" src="images/landscape4.jpg" style="width:100%">
    </div>
    <div id="golf">
      <img class="mySlides" src="images/golf1.jpg" style="width:100%">
      <img class="mySlides" src="images/golf2.jpg" style="width:100%">
      <img class="mySlides" src="images/golf3.jpg" style="width:100%">
      <img class="mySlides" src="images/golf4.jpg" style="width:100%">
    </div>
    <div id="misc">
      <img class="mySlides" src="images/misc1.jpg" style="width:100%">
      <img class="mySlides" src="images/misc2.jpg" style="width:100%">
      <img class="mySlides" src="images/misc3.jpg" style="width:100%">
      <img class="mySlides" src="images/misc4.jpg" style="width:100%">
    </div>
  </div>
</td>

Javascript：

var slideIndex = 1;
showDivs(slideIndex);
showDivs(slideIndex, 'wildlife');
showDivs(slideIndex, 'landscape');
showDivs(slideIndex, 'golf');
showDivs(slideIndex, 'misc');

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

最后，用于调用div的示例按钮的HTML：

<td><a href="javascript:showDivs(slideIndex, 'landscape')" onclick="showDivs(slideIndex, 'landscape')">
  <img src="images/landscape.jpg" width="265" height="77" alt=""></a>
</td>

另外，我正在向前和向后翻页：

                        <td rowspan="8">
            <a href="javascript:prev" onclick="plusDivs(-1)"><img src="images/photography_21.jpg" width="74" height="402" alt=""></a></td>

和

            <td rowspan="8">
            <a href="javascript:next" onclick="plusDivs(1)"><img src="images/photography_23.jpg" width="66" height="402" alt=""></a></td>
        <td>
            <img src="images/spacer.gif" width="1" height="38" alt=""></td>

Javascript div幻灯片隐藏子元素，试图打电话给别人

0 个答案: