Zabawa JS z drugiego odcinku Pana Zelenta

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,490 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,490 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

komentarz 5 kwietnia 2018 przez Tomek Sochacki Ekspert (227,490 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?" :)