Animacja krążącego kółka w Javascript

Question

Cześć,

Mam problem z animacją na stronie internetowej.

Animacja zaczyna działać dopiero po kliknięciu w strzałkę prawą(next) lub lewą(prev).

Co muszę zmienić w kodzie aby funkcjonował poprawnie?

Czyli po odpaleniu strony od razu na środkowym elemencie uruchamia się animacja.

Wycinek z kodu wrzucam poniżej a cały kod wraz z funkcjonującą animacja znajduje się pod adresem:

https://stackoverflow.com/questions/68041721/responsive-menu-in-javascript

const planets = document.querySelectorAll('.moon');

var moon_id = 0;

function moon(direction){

  var n_planet = 8, moon_next;

  if(direction == "prev"){
    moon_next = (moon_id + 1) % n_planet;
    moon_id++;
  } else {
    if(moon_id == 0){
      moon_next = 7;
      moon_id = 7;
    } else {
      moon_next = moon_id - 1;
      --moon_id;
    }
  };

  planets.forEach( ( planet, i ) => {
    if ( i === moon_next ) {
        planet.style.visibility = 'visible';
    } else {
        planet.style.visibility = 'hidden';
    }
  } );
};

            		<div class="planet_container">
              			<div class="planet pt earth" id="pl0">
                			<div class="moon">
                  				<span></span>
                			</div>
              			</div>
              			<div class="planet mars" id="pl1">
              			  	<div class="moon">
              			    	<span></span>
              			  	</div>
              			</div>
              			<div class="planet jupiter" id="pl2">
                			<div class="moon">
                  				<span></span>
                			</div>
              			</div>
              			<div class="planet saturn" id="pl3">
                			<div class="moon">
                  				<span></span>
               				</div>
              			</div>
              			<div class="planet uranus" id="pl4">
               	 			<div class="moon">
                  				<span></span>
                			</div>
              			</div>
              			<div class="planet neptune" id="pl5">
                			<div class="moon">
                  				<span></span>
                			</div>
              			</div>
              			<div class="planet mercury" id="pl6">
                			<div class="moon">
                  				<span></span>
                			</div>
              			</div>
              			<div class="planet venus" id="pl7">
                			<div class="moon">
                  				<span></span>
                			</div>
            			</div>
            		</div>

 

Comments

Jeśli sam rozwiązałeś problem poza forum, to warto byłoby tutaj w komentarzu krótko wyjaśnić jak do tego doszedłeś albo co jest rozwiązaniem. Dzięki temu osoba, która w przyszłości będzie miała podobny temat i trafi tutaj, nie zobaczy tylko nic nie wyjaśniającego info, że udało się rozwiązać tę kwestię, ale też dowie się jak i może od razu rozwiąże swój problem.