• 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
115 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ź 79 wizyt
pytanie zadane 31 stycznia 2018 w JavaScript, jQuery, AJAX przez Kraken14 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 723 wizyt
pytanie zadane 17 sierpnia 2015 w JavaScript, jQuery, AJAX przez Eimens Maniak (69,140 p.)
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

66,324 zapytań

113,061 odpowiedzi

239,218 komentarzy

46,589 pasjonatów

Przeglądających: 262
Pasjonatów: 7 Gości: 255

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.

...