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

Slider JS - odcinek 2 - uproszczone

VPS Starter Arubacloud
0 głosów
141 wizyt
pytanie zadane 4 października 2016 w JavaScript 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ź

+2 głosów
odpowiedź 4 października 2016 przez ScriptyChris Mędrzec (190,190 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ź 408 wizyt
0 głosów
2 odpowiedzi 876 wizyt
pytanie zadane 30 sierpnia 2017 w JavaScript przez Vorex444 Dyskutant (9,610 p.)
0 głosów
1 odpowiedź 622 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...