CODEWITHSUNDEEP
javascripthtml
Yuva
Yuva

Reputation: 41

Looping images in div element

I'm a beginner starting to learn coding. I have designed an neuroscience related experiment on a webpage with 4 layers of webpage. my first layer will be constant. Second layer shows different images during each round of questioning. Third and fourth layer are questions displayed at certain time intervals and/or on click of submit. I would like to know how do i display the different images every time. Precisely, Can i do it using a for loop!? 

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

Upvotes: 4

Views: 3069

Answers (2)

Zin Min
Zin Min

Reputation: 4685

Based on your coding,
The "crosshair" image, layer-1 is show always at z-index:1.
Layer-2 images will show after 6 seconds of page load at z-index:2.
Layer-3 div will show after 12 seconds of page load at z-index:3.
In the Layer-3, there is a submit button. If user click on the Submit button,
Layer-4 will be display and Layer-3 will be hide.
There is a submit button inside Layer-4 again, if user click on that button, all images will be hidden.
So, what you want to do?

Do you want to show images from Layer-2 by looping? If yes, here is sample codes:

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

Upvotes: 1

cchamberlain
cchamberlain

Reputation: 17956

Check out document.querySelector and document.querySelectorAll. With those you can target a single DOM node by CSS query selector or you can target multiple DOM all at once and then loop over them in a for of loop by converting the nodes to an array with Array.from.

Full working example

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

Upvotes: 0

Related Questions