Question

我是初学者，开始学习编码。我在一个有4层网页的网页上设计了一个神经科学相关的实验。我的第一层将是不变的。第二层在每轮提问期间显示不同的图像。第三和第四层是以特定时间间隔和/或点击提交显示的问题。我想知道我每次如何显示不同的图像。确切地说，我可以使用for循环吗？

<html>

<head>
<Title> Experiment </title>
<link rel="stylesheet" type="text/css" href="displayfieldset.css">
</head>
<body>

<!-- Layer 1 of cross hair image -->
<div id="crosshair" style="background-color:black; position:absolute;     width:100%; height:100%; z-index:1; align:center">
<img src="crosshair.jpg" width="1350px" height="750px" >
</div> <!-- Layer 1 closed -->

<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z-    index:2; align:center; margin-left:0.5%; margin-top:0.5%">
    <img id="images" src="image1.jpg" style="width:1325px; height:720px; display:none">
</div> <!-- Layer 2 closed -->


<!-- Layer 3 Question 1 -->
<div id="questionone" style="z-index:3; position:absolute; display:none; margin-left: 180px">
<fieldset name="field1_1" id="field1_1">
<form name ="problem1_1" id="problem1_1"  >
  <b> Identify the problem shown in this image. </b>
  <br> 
  <br>
  <input type="text" name="answer1_1" id="answer1_1" maxlength="30" style="width: 400px">
  <br>
  <br>
  <input type="button" value="Submit" onclick="showdiv()"  >
</form>
</fieldset>
</div>

<!-- Layer 4 Question 2 -->
<div id="questiontwo" style=" position: absolute; z-index:5; align:center; display:none; margin-left: 180px">
<fieldset name="field1_2" id="field1_2" style="position:relative; align:center">
<form name ="problem1_2" id="problem1_2" >
  <b> Propose a solution to the problem. </b>
  <br> 
  <br>
  <input type="text" name="solution1_2" id="solution1_2" maxlength="30" style="height: 200px; width: 400px">
  <br>
  <br> 
  <br>
  <input type="button" value="Submit" onclick="hidediv()" >
  </form>
</fieldset>
</div>

<script>
  function showdiv()
  {
    document.getElementById('questiontwo').style.display = "block";
    document.getElementById('questionone').style.display = "none";
  }

  function hidediv()
  {
   document.getElementById('piclayer').style.display = 'none';
   document.getElementById('questionone').style.display = 'none';
   document.getElementById('questiontwo').style.display = 'none';
  }

  <!-- Time out for image -->
  setTimeout 
  ( function()
    {
      document.getElementById('images').style.display = 'block';
    }
    ,6000
  );

  <!-- Timeout for first question -->
  setTimeout 
  ( function()
   {
    document.getElementById('questionone').style.display = 'block';
   }
   ,12000
  );
</script>



</body>
</html>

Answer 1

根据您的编码，
“十字准线”图像，第一层始终显示在z-index：1 在z-index：2。页面加载6秒后，将显示第2层图像在z-index：3。页面加载12秒后，将显示第3层div 在第3层中，有一个提交按钮。如果用户单击“提交”按钮，则将显示第4层，将隐藏第3层再次在Layer-4中有一个提交按钮，如果用户点击该按钮，所有图像都将被隐藏。
那么，你想做什么？

您想通过循环显示第2层的图像吗？如果是，这里是示例代码：

var x = 0;
function myFunction(){  
   
   var Layer2Images = document.querySelectorAll("img.images"); 
   if (x == Layer2Images.length)
      x=0;
   for (i = 0; i < Layer2Images.length; i++) {
    Layer2Images[i].style.display = 'none';
   }
   Layer2Images[x].style.display = 'block';
   x++;
}

setInterval(myFunction, 1000)

<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z-index:2; align:center; margin-left:0.5%; margin-top:0.5%">
   <img class="images" src="https://pixabay.com/static/uploads/photo/2012/05/29/00/43/car-49278_1280.jpg" style="width:400px;height:300px; display:none;">
   <img class="images" src="https://static.pexels.com/photos/24353/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
   <img class="images" src="https://static.pexels.com/photos/16155/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
</div> <!-- Layer 2 closed -->

Answer 2

结帐document.querySelector和document.querySelectorAll。有了这些，您可以通过CSS查询选择器定位单个DOM节点，或者您可以一次定位多个DOM，然后通过将节点转换为Array.from的数组，在for循环中循环它们。

完整的工作示例

let i = 0

// Grab all the layers and read them into an array so we can iterate them.
let layers = Array.from(document.querySelectorAll('img.layer'))
const nextLayer = () => {
  // increment i and compare incremented value, if greater than 3, reset to first layer.
  if(++i > 3)
    i = 1
  // iterate all layers and set their CSS display property to none.
  layers.forEach((x) => { x.style.display = 'none' })
  // select the single layer we are currently on and set its css display to block.
  document.querySelector(`img.layer_${i}`).style.display = 'block'
}

// show first layer
nextLayer()
// show next layer every 2 seconds
setInterval(nextLayer, 2000)

<img class="layer layer_1" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<img class="layer layer_2" src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg" />
<img class="layer layer_3" src="http://livewallpaper.info/wp-content/uploads/2015/12/Desktop-Cute-Wallpapers-HD-1920x1080-1.jpg" />

div元素中的循环图像

2 个答案: