Change order of images on page load

[Paul_Wilkins]

@javascript7

Can you use both using one to shuffle and one to randomize, of course having to change #numbers to something else?

That’s what my code does. It randomizes the list on page load, then shuffles the top item to the bottom every 3 seconds.

[javascript7]

@Paul_Wilkins

That’s what my code does. It randomizes the list on page load, then shuffles the top item to the bottom every 3 seconds.

Got it and makes sense.

Can the code be easily altered where the #1 position becomes #2 and then #3 , etc. and then all moved accordingly that way?

[Paul_Wilkins]

@javascript7

Can the code be easily altered where the #1 position becomes #2 and then #3 , etc. and then all moved accordingly that way?

appendChild puts it at the end, and insertBefore lets you put it at the start, but requires a second argument saying before which one you are putting it.

So you can use:

  container.insertBefore(container.lastElementChild, container.firstElementChild);

Edit fiddle - JSFiddle - Code Playground

[javascript7]

Very nice and thank you for the code and educational experience with JS.

[javascript7]

<ul id="numbers">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Is it possible to have a break as below and still have all five rotate as they do? I can’t seem to get anything to work. So my thoughts are that you can’t.

<ul id="numbers">
  <li>...</li>
  <li>...</li>
  <li>...</li>
other content
other content
  <li>...</li>
  <li>...</li>
</ul>

So for example the first 3 are on the top of the page and then you have content and then the last 2 are on the bottom of the page, but they all rotate 1-5.