• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Animacja krążącego kółka w Javascript

Object Storage Arubacloud
0 głosów
97 wizyt
pytanie zadane 22 czerwca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)
zamknięte 22 czerwca 2021 przez xjafajx

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>

 

komentarz zamknięcia: Sam rozwiązałem problem
1
komentarz 23 czerwca 2021 przez Arkadiusz Waluk Ekspert (288,330 p.)
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.

Podobne pytania

0 głosów
1 odpowiedź 496 wizyt
pytanie zadane 14 października 2018 w JavaScript przez Grzegorz :> Dyskutant (8,050 p.)
+1 głos
1 odpowiedź 82 wizyt
+2 głosów
1 odpowiedź 595 wizyt

92,660 zapytań

141,553 odpowiedzi

319,994 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...