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

Slider JS - odcinek 2 - uproszczone

0 głosów
106 wizyt
pytanie zadane 4 października 2016 w JavaScript, jQuery, AJAX przez steffanek Nowicjusz (230 p.)
edycja 4 października 2016 przez steffanek

Pytanie za 100 punkcikow :) Ponizej sa 2 proste kody(roznia sie tylko ostatnia linia w scrypcie) gdzie jest zrobiony slajder (5ciu zdjec) ktore sie przewijaja co 3 sekundy. 

1szy kod dziala prawidlowo.

2gi kod laduje pierw puste zdjecie... nie rozumiem dlaczego..

Ponizej 1szy kod : 

<script type="text/javascript">
	
	
	
	
	function slajder(){
	
	var Image = document.getElementById('img');
	imageCount = imageCount + 1;
		if (imageCount > total) {
		imageCount = 1;
		}
		if (imageCount < 1){
		imageCount = total;
		}
	
	Image.src="Slajdy/slajd"+imageCount+".png";
	
	}
	
	var imageCount = 1;
	var total = 5;
	setInterval(slajder, 3000);
	
	</script>
	
</head>
<body onload="slajder();">

	<div id="container">
	<img src="Slady/slajd1.png" id="img" />
	
	</div> 

</body>

 

Ponizej 2gi kod gdzie tylko dodalem var countdown na ostatniej lini skryptu i zmienilem funkcje w onload...

<script type="text/javascript">
	
	
	
	
	function slajder(){
	
	var Image = document.getElementById('img');
	imageCount = imageCount + 1;
		if (imageCount > total) {
		imageCount = 1;
		}
		if (imageCount < 1){
		imageCount = total;
		}
	
	Image.src="Slajdy/slajd"+imageCount+".png";
	
	}
	
	var imageCount = 1;
	var total = 5;
	var countdown = setInterval(slajder, 3000);
	
	</script>
	
</head>
<body onload="countdown();">

	<div id="container">
	<img src="Slady/slajd1.png" id="img" />
	
	</div> 

</body>

Tak samo nie rozumiem czemu ten kod pokazuje tez puste zdjecie, a wedlug mnie powinien pokazac slajd2.png.... :

<script type="text/javascript">
	
	function slajder(){
	
	var Image = document.getElementById('img');
	imageCount = imageCount + 1;
		
		}
	
	Image.src="Slajdy/slajd"+imageCount+".png";
	
	}
	
	var imageCount = 1;
	
	
	</script>
	
</head>
<body onload="slajder();">

	<div id="container">
	<img src="Slady/slajd1.png" id="img" />
	
	</div> 

</body>

Z gory dziekuje za pomoc !

1 odpowiedź

+3 głosów
odpowiedź 4 października 2016 przez JSHolic Szeryf (78,700 p.)

Nie pomogę konkretnie z tymi zdjęciami, bo nie chce mi się podkładać jakichś testowych. Mogę Ci jednak udzielić kilku porad i wskazać możliwe przyczyny, dlaczego kod nie działa:

Po pierwsze sprawdź konsolę - na pewno masz tam jakieś błędy, przynajmniej na oko tak bym obstawiał

  • var Image

    Nazwy zmiennych piszemy stosując camelCase. Z dużej litery piszemy nazwy klas i konstruktorów.

  • zmienne deklaruj zanim będziesz się do nich odnosić. Najlepiej na górze ciała funkcji lub (jeśli korzystasz z ES6 const/let) na górze bloku. Jeśli zadeklarujesz zmienną poniżej funkcji, w której z niej korzystasz (odnosisz się do niej), to w konsoli powinieneś ujrzeć błąd typu "nazwa_zmiennej is undefined". Powodem jest obecność zjawiska hoisting w JavaScripcie (dotyczy on zmiennych deklarowanych przy pomocy słówka var oraz funkcji typu function statement) => https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/varhttp://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/
  • <body onload="countdown();">

    Ten kawałek kodu zawiera zarówno błąd (w drugim skrypcie), jak i niepoprawną praktykę programistyczną w JavaScript (dotyczy wszystkich skryptów).
    Błąd, ponieważ countdown u Ciebie nie jest funkcją lecz zmienną, do której z funkcji setInterval() zwracasz ID tego interwału
     

    var countdown = setInterval(slajder, 3000);


    https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
    Plus dla Ciebie, że nie stosujesz eval przy tej funkcji.
    Niepoprawna praktyka, ponieważ nie zaleca się korzystania z HTMLowych atrybutów odpowiedzialnych za wyłapywanie zdarzeń na elementach DOM =>https://kornel.ski/pl/onclick
    Do tego służy JavaScriptowy addEventListener() W tych skryptach akurat nie potrzeba Ci nasłuchiwania eventów, więc ten tip przekazuje Tobie na zaś.
    Ale żebyś nie musiał i nie potrzebował używać atrybutu onload - przenieś skrypt z <head> na koniec tagu <body>. Przyspieszysz dzięki temu ładowanie samej strony (elementów DOM) i unikniesz sytuacji, w której zechcesz w skryptach odnieść się do elementów HTML, których jeszcze nie ma w DOM.

  • raczej kosmetyczna pierdółka, ale
     

    <img src="Slady/slajd1.png" id="img" />

    Jeśli piszesz stosując się do HTML5 - tagi "samozamykające się" nie muszą być kończone slashem => https://www.w3.org/TR/html-markup/syntax.html#syntax-elements

Podobne pytania

0 głosów
1 odpowiedź 116 wizyt
0 głosów
2 odpowiedzi 540 wizyt
pytanie zadane 30 sierpnia 2017 w JavaScript, jQuery, AJAX przez Vorex444 Dyskutant (9,660 p.)
0 głosów
1 odpowiedź 137 wizyt
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

64,950 zapytań

111,424 odpowiedzi

234,495 komentarzy

46,784 pasjonatów

Przeglądających: 243
Pasjonatów: 12 Gości: 231

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.

...