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

Zabawa JS z drugiego odcinku Pana Zelenta

VPS Starter Arubacloud
0 głosów
389 wizyt
pytanie zadane 5 kwietnia 2018 w JavaScript przez Kiszony Użytkownik (630 p.)

A więc tak, po dwukrotnym obejrzeniu filmu Pana Zelenta nadal nie potrafię dojść do wyznaczonych sobie celów. Konkretnie miałem nadzieję na zrobienie: Nowej animacji przejscia, dodania strzałek do slidera, wycentrowaniu strony(zrobione) , dodanie przycisku play/stop i zmodyfikowaniu czasów przejść między slajdami. Bardzo prosił bym o pomoc, java script wydaje się być przyjemnym językiem ale bez tego nie mogę przejść do następnych kursów. Nie proszę również o gotowe odpowiedzi a raczej sugestie, które pomogą mi dokończyć zadania. 

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
	<style>
		body
		{
		  background-color: #234567;
		  font-size: 24px;
	  	color: white;
		}
		span
		{
		  position: relative;
		  width: 400px;
		  height: 200px;
		  left: 500px;
		  top: 650px;
		  
		}
		div
		{
		position: absolute;
		left: 13%;
		top: 5%;
		}
	</style>


	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>		

	<script type="text/javascript">

		var numer = Math.floor(Math.random()*6)+1;
		
		var timer1 =0;
		var timer2 =0;
		
		function ustawslajd(nrslajdu)
		{
		clearTimeout(timer1);
		clearTimeout(timer2);
		numer = nrslajdu-1;

		schowaj();
		setTimeout("zmienslajd()", 500);

		}



		function schowaj()
		{
			$("#slider").fadeOut(500);
		}		


		function zmienslajd()
		{
			numer++; if (numer>6) numer=1;
			
		        var plik = "<img src=\"zdjecia/zdjecie" + numer + ".jpg\" /				>";

													document.getElementById("slider").innerHTML = plik;
		$("#slider").fadeIn(500);
		

			timer1 = setTimeout("zmienslajd()", 5000);
			timer2 = setTimeout("schowaj()", 4500);
		}
	</script>	
</head>

<body onload="zmienslajd()">
	<span onclick="zmienslajd()" style="cursor:pointer;"> [ <--- ]</span>
	<span onclick="ustawslajd(1)" style="cursor:pointer;"> [ 1 ]</span>
	<span onclick="ustawslajd(2)" style="cursor:pointer;"> [ 2 ]</span>
	<span onclick="ustawslajd(3)" style="cursor:pointer;"> [ 3 ]</span>
	<span onclick="ustawslajd(4)" style="cursor:pointer;"> [ 4 ]</span>
	<span onclick="ustawslajd(5)" style="cursor:pointer;"> [ 5 ]</span>
	<span onclick="ustawslajd(6)" style="cursor:pointer;"> [ 6 ]</span>
	<span onclick="zmienslajd()" style="cursor:pointer;"> [ ---> ]</span>	
	
	<div id="slider"></div>
	
	
</body>

</html> 

 

komentarz 5 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Proponuję nie zagłębiać się zbyt mocno w ten kod i najpierw może przerobić sobie jakiś kurs samego JS, dobre opinie czytałem o: http://kursjs.pl/ sam co prawda nie przeglądałem tego za dokładnie ale tak na szybko wydaje się oki.

Szczerze mówiąc to ten kod co wstawiłeś ma cale mnóstwo antywzorców i nie polecam uczyć się na takich przykładach. Nie znam tych kursów o których często tu słyszę, może kiedyś w wolnej chwili pobawię się nimi, ale jeśli tam jest taki właśnie kod to polecę Ci zmianę na inny kurs.

Nie będę tutaj wypisywał konkretnych rzeczy bo za dużo tego, ale jeśli jesteś ciekaw to polecam poszukać sobie tu na forum hasła code review strony i kodu js, a na pewno znajdziesz wiele ciekawych informacji.
komentarz 5 kwietnia 2018 przez Tomasz Rogalski Bywalec (2,800 p.)
Ten link i kurs fajny. Przerabiałem.
komentarz 5 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
setTimeout("zmienslajd()", 500);

//lub:
<span onclick="zmienslajd()" style="cursor:pointer;">

//lub:
div
{
    position: absolute;
    left: 13%;
    top: 5%;
}

serio... to jest fajne dla osób początkujących? Moim zdaniem nie, bo niepotrzebnie uczy od początku złych praktyk.

komentarz 5 kwietnia 2018 przez Kiszony Użytkownik (630 p.)

Ten div to moja sprawka ... Potrzebowałem na szybko wycentrować obrazek w css,ie a efekty tego widać niestety w kodzie frown

komentarz 5 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Potrzebowałem na szybko wycentrować obrazek

To dodaj klasę i ostyluj po tej klasie... parę znaków więcej do wpisania ale wyrobisz sobie dobre nawyki :) z czasem takich "na szybko" będziesz miał więcej i kiedyś się pogubisz w tym stylowaniu po znacznikach, uwierz mi, każdy to przerabiał ja również... za chwilę dodasz gdzieś w kodzie innego diva i "ups... co się stało?" :)

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

Podobne pytania

0 głosów
2 odpowiedzi 306 wizyt
0 głosów
3 odpowiedzi 245 wizyt
+5 głosów
4 odpowiedzi 3,573 wizyt
pytanie zadane 14 sierpnia 2016 w Offtop przez QizmoPL Stary wyjadacz (11,440 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 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!

...