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

Niezrozumiały kod slidera

0 głosów
111 wizyt
pytanie zadane 28 grudnia 2017 w Nasze projekty przez marcin.janusz Nowicjusz (120 p.)

Witajcie, jestem początkujący i tworzę swój slider, ale zaciąłem się w pewnym momencie, a mianowicie gdy chciałem dodać na wyświetlanym obrazku strzałki do zmiany slajdu. Na w3schools znalazłem slider i postanowiłem się na nim opierać, ale nie do końca rozumiem jego kod.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>

<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides" src="slajd1.jpg" style="width:100%">
  <img class="mySlides" src="slajd2.jpg" style="width:100%">
  <img class="mySlides" src="slajd3.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}
</script>

</body>
</html> 


Po co deklarowane jest "var i", skoro nie zostaje ono użyte nigdzie poza pętlami?

Mam problem ze zrozumieniem tych dwóch pętli. Wg mojego rozumowania pierwsza pętla sprawia, że wszystkie slajdy są niewidoczne poprzez ustawienie display na none. I tu pierwsze pytanie- jeśli mój tok rozumowania jest właściwy to czy document.getElementsByClassName("demo")[i] oznacza odniesienie do konkretnego slajdu, a jeśli tak, to w jaki sposób to się odbywa, skoro nigdzie nie jest zaznaczone, że pierwszym elementem jest np właśnie ten slajd1 czy to wynika z tego fragmentu kodu:
 <img class="mySlides" src="slajd1.jpg" style="width:100%">
  <img class="mySlides" src="slajd2.jpg" style="width:100%">
  <img class="mySlides" src="slajd3.jpg" style="width:100%">

i jeśli tak to jak mam to rozumieć, że automatycznie uznał pierwszy za pierwszy itd? i kolejne pytanie czy te trzy slajdy można traktować jako obiekty klasy "mySlides"?

Kolejna pętla ustawia taką samą klasę dla wszystkich kropek, tylko prosiłbym o dokładne wytłumaczenie jak działa ta linia:

dots[i].className = dots[i].className.replace(" w3-white", "");

domyślam się, że zmienia klasy, ale w jaki sposób to robi i dlaczego podana jest nazwa "w3-white" jeśli taka klasa wyżej nie istnieje?

x[slideIndex-1].style.display = "block";
ta linia zmienia widoczność konkretnego slajdu, ale dlaczego odejmuje 1?

dots[slideIndex-1].className += " w3-white";
Ta linia ntomiast prawdopodobnie zmienia klasę kropki odpowiadającej wyświetlanemu slajdowi, ale możecie wytłumaczyć po kolei w jaki sposób?

Pytań jest dużo i całość pewnie jest banalna i chaotyczna, więc przepraszam, ale proszę o odpowiedzi jak dla zupełnego amatora.
Pozdrawiam :)

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 73 wizyt
pytanie zadane 31 stycznia 2018 w JavaScript, jQuery, AJAX przez Kraken14 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 682 wizyt
pytanie zadane 17 sierpnia 2015 w JavaScript, jQuery, AJAX przez Eimens Maniak (68,800 p.)
0 głosów
2 odpowiedzi 117 wizyt
pytanie zadane 4 kwietnia 2018 w HTML i CSS przez saszaw90 Początkujący (330 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

63,367 zapytań

109,637 odpowiedzi

229,049 komentarzy

44,351 pasjonatów

Przeglądających: 242
Pasjonatów: 16 Gości: 226

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...