Problem with image 'rotations' within a div element












0














I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.



<!DOCTYPE html>

<html>

<title>test page</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<head>

<style>

div.rotation {

height: 256px;

width: 100%;

padding: 0px;

background-color: powderblue;

border-style: solid;

border-width: 5px;

border-radius: 25px;

}

</style>

</head>



<body>



 <div class="w3-quarter">

  <div class="w3-padding-small">

   <div class="w3-center">

    <div class="rotation"> 

     <p>    

      <img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />

      <img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation'  />

      <img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />

      <img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />

     </p>

    </div>

   </div>

  </div>

 </div>



</body>

</html>



<script type='text/javascript'>

var rotation = function () {

var currentImage,

    images = ,

    ImgName = ,

    count,

    hideImages,

    showImage,

    fn;



    count = (function () {              

      // Figure out how many images we have on the rotation          

      var x = 0;

      while (document.getElementById('rotateImg' + (x + 1).toString())) {

        images[x] = document.getElementById('rotateImg' + x.toString());

        ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;

        x++;

      }

      return images.length;

    })();



    hideImages = function () {

      // Hide all the images              

      for (var i = 0; i < count; i++) {

        images[i].style.display = 'none';

      }

    };



    showImage = function (number) {

      document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))"; 

      images[number].style.display = 'block';

    };



    fn = {};

    fn.setupRotation = function () {

      // Show the first image

      currentImage = 0;

      showImage(currentImage);



      // Start the rotation

      var interval = setInterval(rotation.advanceRotation, 4000);

    };



    fn.advanceRotation = function () {

      if (currentImage + 1 == count)

        currentImage = 0;

      else

        currentImage++;

        hideImages();

        showImage(currentImage);

    };



    return fn;

    } ();



    rotation.setupRotation();      

  </script>





javascript







share|improve this question






















  • What are you trying to call on the last line with rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same with rotation.advanceRotation when you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
    – Jonny Rathbone
    Nov 16 '18 at 22:23












  • I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
    – Jonny Rathbone
    Nov 16 '18 at 22:26










  • Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
    – Pangit
    Nov 17 '18 at 18:06










  • Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
    – Pangit
    Nov 17 '18 at 18:07
















0














I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.



<!DOCTYPE html>

<html>

<title>test page</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<head>

<style>

div.rotation {

height: 256px;

width: 100%;

padding: 0px;

background-color: powderblue;

border-style: solid;

border-width: 5px;

border-radius: 25px;

}

</style>

</head>



<body>



 <div class="w3-quarter">

  <div class="w3-padding-small">

   <div class="w3-center">

    <div class="rotation"> 

     <p>    

      <img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />

      <img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation'  />

      <img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />

      <img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />

     </p>

    </div>

   </div>

  </div>

 </div>



</body>

</html>



<script type='text/javascript'>

var rotation = function () {

var currentImage,

    images = ,

    ImgName = ,

    count,

    hideImages,

    showImage,

    fn;



    count = (function () {              

      // Figure out how many images we have on the rotation          

      var x = 0;

      while (document.getElementById('rotateImg' + (x + 1).toString())) {

        images[x] = document.getElementById('rotateImg' + x.toString());

        ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;

        x++;

      }

      return images.length;

    })();



    hideImages = function () {

      // Hide all the images              

      for (var i = 0; i < count; i++) {

        images[i].style.display = 'none';

      }

    };



    showImage = function (number) {

      document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))"; 

      images[number].style.display = 'block';

    };



    fn = {};

    fn.setupRotation = function () {

      // Show the first image

      currentImage = 0;

      showImage(currentImage);



      // Start the rotation

      var interval = setInterval(rotation.advanceRotation, 4000);

    };



    fn.advanceRotation = function () {

      if (currentImage + 1 == count)

        currentImage = 0;

      else

        currentImage++;

        hideImages();

        showImage(currentImage);

    };



    return fn;

    } ();



    rotation.setupRotation();      

  </script>





javascript







share|improve this question






















  • What are you trying to call on the last line with rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same with rotation.advanceRotation when you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
    – Jonny Rathbone
    Nov 16 '18 at 22:23












  • I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
    – Jonny Rathbone
    Nov 16 '18 at 22:26










  • Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
    – Pangit
    Nov 17 '18 at 18:06










  • Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
    – Pangit
    Nov 17 '18 at 18:07














0












0








0







I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.



<!DOCTYPE html>

<html>

<title>test page</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<head>

<style>

div.rotation {

height: 256px;

width: 100%;

padding: 0px;

background-color: powderblue;

border-style: solid;

border-width: 5px;

border-radius: 25px;

}

</style>

</head>



<body>



 <div class="w3-quarter">

  <div class="w3-padding-small">

   <div class="w3-center">

    <div class="rotation"> 

     <p>    

      <img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />

      <img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation'  />

      <img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />

      <img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />

     </p>

    </div>

   </div>

  </div>

 </div>



</body>

</html>



<script type='text/javascript'>

var rotation = function () {

var currentImage,

    images = ,

    ImgName = ,

    count,

    hideImages,

    showImage,

    fn;



    count = (function () {              

      // Figure out how many images we have on the rotation          

      var x = 0;

      while (document.getElementById('rotateImg' + (x + 1).toString())) {

        images[x] = document.getElementById('rotateImg' + x.toString());

        ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;

        x++;

      }

      return images.length;

    })();



    hideImages = function () {

      // Hide all the images              

      for (var i = 0; i < count; i++) {

        images[i].style.display = 'none';

      }

    };



    showImage = function (number) {

      document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))"; 

      images[number].style.display = 'block';

    };



    fn = {};

    fn.setupRotation = function () {

      // Show the first image

      currentImage = 0;

      showImage(currentImage);



      // Start the rotation

      var interval = setInterval(rotation.advanceRotation, 4000);

    };



    fn.advanceRotation = function () {

      if (currentImage + 1 == count)

        currentImage = 0;

      else

        currentImage++;

        hideImages();

        showImage(currentImage);

    };



    return fn;

    } ();



    rotation.setupRotation();      

  </script>





javascript







share|improve this question













I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.



<!DOCTYPE html>

<html>

<title>test page</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<head>

<style>

div.rotation {

height: 256px;

width: 100%;

padding: 0px;

background-color: powderblue;

border-style: solid;

border-width: 5px;

border-radius: 25px;

}

</style>

</head>



<body>



 <div class="w3-quarter">

  <div class="w3-padding-small">

   <div class="w3-center">

    <div class="rotation"> 

     <p>    

      <img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />

      <img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation'  />

      <img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />

      <img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />

     </p>

    </div>

   </div>

  </div>

 </div>



</body>

</html>



<script type='text/javascript'>

var rotation = function () {

var currentImage,

    images = ,

    ImgName = ,

    count,

    hideImages,

    showImage,

    fn;



    count = (function () {              

      // Figure out how many images we have on the rotation          

      var x = 0;

      while (document.getElementById('rotateImg' + (x + 1).toString())) {

        images[x] = document.getElementById('rotateImg' + x.toString());

        ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;

        x++;

      }

      return images.length;

    })();



    hideImages = function () {

      // Hide all the images              

      for (var i = 0; i < count; i++) {

        images[i].style.display = 'none';

      }

    };



    showImage = function (number) {

      document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))"; 

      images[number].style.display = 'block';

    };



    fn = {};

    fn.setupRotation = function () {

      // Show the first image

      currentImage = 0;

      showImage(currentImage);



      // Start the rotation

      var interval = setInterval(rotation.advanceRotation, 4000);

    };



    fn.advanceRotation = function () {

      if (currentImage + 1 == count)

        currentImage = 0;

      else

        currentImage++;

        hideImages();

        showImage(currentImage);

    };



    return fn;

    } ();



    rotation.setupRotation();      

  </script>





javascript




javascript






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 16 '18 at 22:15









Pangit

115




115












  • What are you trying to call on the last line with rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same with rotation.advanceRotation when you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
    – Jonny Rathbone
    Nov 16 '18 at 22:23












  • I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
    – Jonny Rathbone
    Nov 16 '18 at 22:26










  • Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
    – Pangit
    Nov 17 '18 at 18:06










  • Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
    – Pangit
    Nov 17 '18 at 18:07


















  • What are you trying to call on the last line with rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same with rotation.advanceRotation when you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
    – Jonny Rathbone
    Nov 16 '18 at 22:23












  • I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
    – Jonny Rathbone
    Nov 16 '18 at 22:26










  • Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
    – Pangit
    Nov 17 '18 at 18:06










  • Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
    – Pangit
    Nov 17 '18 at 18:07
















What are you trying to call on the last line with rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same with rotation.advanceRotation when you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
– Jonny Rathbone
Nov 16 '18 at 22:23






What are you trying to call on the last line with rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same with rotation.advanceRotation when you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
– Jonny Rathbone
Nov 16 '18 at 22:23














I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
– Jonny Rathbone
Nov 16 '18 at 22:26




I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
– Jonny Rathbone
Nov 16 '18 at 22:26












Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
– Pangit
Nov 17 '18 at 18:06




Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
– Pangit
Nov 17 '18 at 18:06












Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
– Pangit
Nov 17 '18 at 18:07




Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
– Pangit
Nov 17 '18 at 18:07












1 Answer
1






active

oldest

votes


















0














One thought might be to pluck off the first child and slam him to the end of the line.






let images = document.querySelector('#images');



setInterval(() => {

  let el = images.removeChild(images.childNodes[0]);

  images.appendChild(el);

}, 1000);

#images {

  font-size: 0;

}



.img {

  display: inline-block;

  width: 30px;

  height: 30px;

}

<div id="images">

  <div class="img" style="background-color: red"></div>

  <div class="img" style="background-color: orange"></div>

  <div class="img" style="background-color: yellow"></div>

  <div class="img" style="background-color: green"></div>

  <div class="img" style="background-color: blue"></div>

</div>








share|improve this answer





















  • Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
    – Pangit
    Nov 17 '18 at 18:10










  • <style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
    – Pangit
    Nov 17 '18 at 18:15










  • <div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
    – Pangit
    Nov 17 '18 at 18:16










  • Javascript exactly the same as you had supplied...
    – Pangit
    Nov 17 '18 at 18:17











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346141%2fproblem-with-image-rotations-within-a-div-element%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














One thought might be to pluck off the first child and slam him to the end of the line.






let images = document.querySelector('#images');



setInterval(() => {

  let el = images.removeChild(images.childNodes[0]);

  images.appendChild(el);

}, 1000);

#images {

  font-size: 0;

}



.img {

  display: inline-block;

  width: 30px;

  height: 30px;

}

<div id="images">

  <div class="img" style="background-color: red"></div>

  <div class="img" style="background-color: orange"></div>

  <div class="img" style="background-color: yellow"></div>

  <div class="img" style="background-color: green"></div>

  <div class="img" style="background-color: blue"></div>

</div>








share|improve this answer





















  • Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
    – Pangit
    Nov 17 '18 at 18:10










  • <style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
    – Pangit
    Nov 17 '18 at 18:15










  • <div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
    – Pangit
    Nov 17 '18 at 18:16










  • Javascript exactly the same as you had supplied...
    – Pangit
    Nov 17 '18 at 18:17
















0














One thought might be to pluck off the first child and slam him to the end of the line.






let images = document.querySelector('#images');



setInterval(() => {

  let el = images.removeChild(images.childNodes[0]);

  images.appendChild(el);

}, 1000);

#images {

  font-size: 0;

}



.img {

  display: inline-block;

  width: 30px;

  height: 30px;

}

<div id="images">

  <div class="img" style="background-color: red"></div>

  <div class="img" style="background-color: orange"></div>

  <div class="img" style="background-color: yellow"></div>

  <div class="img" style="background-color: green"></div>

  <div class="img" style="background-color: blue"></div>

</div>








share|improve this answer





















  • Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
    – Pangit
    Nov 17 '18 at 18:10










  • <style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
    – Pangit
    Nov 17 '18 at 18:15










  • <div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
    – Pangit
    Nov 17 '18 at 18:16










  • Javascript exactly the same as you had supplied...
    – Pangit
    Nov 17 '18 at 18:17














0












0








0






One thought might be to pluck off the first child and slam him to the end of the line.






let images = document.querySelector('#images');



setInterval(() => {

  let el = images.removeChild(images.childNodes[0]);

  images.appendChild(el);

}, 1000);

#images {

  font-size: 0;

}



.img {

  display: inline-block;

  width: 30px;

  height: 30px;

}

<div id="images">

  <div class="img" style="background-color: red"></div>

  <div class="img" style="background-color: orange"></div>

  <div class="img" style="background-color: yellow"></div>

  <div class="img" style="background-color: green"></div>

  <div class="img" style="background-color: blue"></div>

</div>








share|improve this answer












One thought might be to pluck off the first child and slam him to the end of the line.






let images = document.querySelector('#images');



setInterval(() => {

  let el = images.removeChild(images.childNodes[0]);

  images.appendChild(el);

}, 1000);

#images {

  font-size: 0;

}



.img {

  display: inline-block;

  width: 30px;

  height: 30px;

}

<div id="images">

  <div class="img" style="background-color: red"></div>

  <div class="img" style="background-color: orange"></div>

  <div class="img" style="background-color: yellow"></div>

  <div class="img" style="background-color: green"></div>

  <div class="img" style="background-color: blue"></div>

</div>








let images = document.querySelector('#images');



setInterval(() => {

  let el = images.removeChild(images.childNodes[0]);

  images.appendChild(el);

}, 1000);

#images {

  font-size: 0;

}



.img {

  display: inline-block;

  width: 30px;

  height: 30px;

}

<div id="images">

  <div class="img" style="background-color: red"></div>

  <div class="img" style="background-color: orange"></div>

  <div class="img" style="background-color: yellow"></div>

  <div class="img" style="background-color: green"></div>

  <div class="img" style="background-color: blue"></div>

</div>





let images = document.querySelector('#images');



setInterval(() => {

  let el = images.removeChild(images.childNodes[0]);

  images.appendChild(el);

}, 1000);

#images {

  font-size: 0;

}



.img {

  display: inline-block;

  width: 30px;

  height: 30px;

}

<div id="images">

  <div class="img" style="background-color: red"></div>

  <div class="img" style="background-color: orange"></div>

  <div class="img" style="background-color: yellow"></div>

  <div class="img" style="background-color: green"></div>

  <div class="img" style="background-color: blue"></div>

</div>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 16 '18 at 22:43









Will

1,79411111




1,79411111












  • Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
    – Pangit
    Nov 17 '18 at 18:10










  • <style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
    – Pangit
    Nov 17 '18 at 18:15










  • <div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
    – Pangit
    Nov 17 '18 at 18:16










  • Javascript exactly the same as you had supplied...
    – Pangit
    Nov 17 '18 at 18:17


















  • Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
    – Pangit
    Nov 17 '18 at 18:10










  • <style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
    – Pangit
    Nov 17 '18 at 18:15










  • <div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
    – Pangit
    Nov 17 '18 at 18:16










  • Javascript exactly the same as you had supplied...
    – Pangit
    Nov 17 '18 at 18:17
















Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10




Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10












<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15




<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15












<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16




<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16












Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17




Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346141%2fproblem-with-image-rotations-within-a-div-element%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

mysqli_query(): Empty query in /home/lucindabrummitt/public_html/blog/wp-includes/wp-db.php on line 1924

Image
0 I just uploaded a new plugin to my wordpress site and I got this warning: mysqli_query(): Empty query in /home/lucindabrummitt/public_html/blog/wp-includes/wp-db.php on line 1924 Usually if I have a problem, I can find answers on google but this one seems pretty particular and I'm not finding any info on it except for this forum. I'm not terribly techie but if someone can tell me how to read this and how to change it I can follow directions pretty well. Thanks All! PS If I don't have the proper tags here could someone add the appropriate tags? php mysql wordpress share | improve this question asked Nov 16 '18 at 20:41 ...
Read more

How to change which sound is reproduced for terminal bell?

Image
3 Recently upgrade to 18.10 from 18.04, and using the terminal is becoming annoying: the new alert sound is a drip ( /usr/share/sounds/gnome/default/alerts/drip.ogg ), and the previous one is still located at ( /usr/share/sounds/ubuntu/stereo/bell.ogg ). My issue is that at the gnome-terminal, when autocompleting or pressing left BOTH sounds are reproduced, at the same time. I want to just have ubuntu/stereo/bell.ogg active, not both . At the moment I have been only able to reduce the volume of the alerts (but still both are played), or turn the alerts down (but I dislike both "solutions"). gnome-terminal 18.10 teminal-bell share | improve this question ...
Read more

Can I use Tabulator js library in my java Spring + Thymeleaf project?

Image
0 I want to add Tabulator js to my java project. I added tabulator.min.js, tabulator.min.css to resources folder. After that added to my html page these dependencies as recommending in readme.md. <link rel="stylesheet" th:href="@{/css/tabulator.min.css}"> <script type="text/javascript" th:src="@{/js/tabulator.min.js}"></script> Now my tables view all elements, that I have in the html page, but not correct. In the documentation of Tabulator is example how to create header and table, var table = new Tabulator("#example-table", { columns:[ {title:"Name", field:"name", sorter:"string", width:200, editor:true}, {title:"Age", field:"age", sorter:"...
Read more