Problem z sliderem

pytanie zadane 31 października 2016 w JavaScript przez dewe Gaduła (4,300 p.)

Witam, napisałem swój jeden z pierwszych skryptów i mam problem, ponieważ po kliknięciu w czerwone kwadraciki (przejście do następnego slajdu) nie robi się efekt (fadeIn), a po kilku sekundach nie zanika (fadeOut), aktualnie usunąłem te linjiki kodu, ponieważ i tak nie działały, ale mógłby mnie ktoś uświadomić co zrobić, aby to działało lub podać gotowe rozwiązanie? :) (Zapewne rozwiązanie to 2/3 linijki kodu, dlatego proszę o gotowca)

<!DOCTYPE html>
<html lang="pl">
<head>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
	#slider { width: 971px; height: 207px; border: 1px solid black; margin: auto; position: relative; }
	.left { width: 50px; height: 50px; background: red; z-index: 1; position: absolute; top: 80px; left: 50px; }
	.right { width: 50px; height: 50px; background: red; z-index: 1; position: absolute; top: 80px; right: 50px; }
</style>

</head>
<body onload="zmienslajd()">
<div id="slider">
</div>

<script type="text/javascript">

	var numer = 1;
	var timer;
	var timer2;
	
	function dodaj()
	{
		clearTimeout(timer);
		clearTimeout(timer2);
		if (numer>4) numer = 1;
		numer++;
		var plik = "<img src=\"images/" + numer + ".png\" />" + "<span class=\"left\" onclick=\"odejmij()\"></span>" + "<span class=\"right\" onclick=\"dodaj()\"></span>";		
		document.getElementById("slider").innerHTML = plik;
		numer--;
		setTimeout("schowaj()", 4500);
		zmienslajd();
	}
	function odejmij()
	{
		$("#slider").fadeIn(500);
		setTimeout("schowaj()", 4500);
		clearTimeout(timer);
		clearTimeout(timer2);	
		numer--;	
		var plik = "<img src=\"images/" + numer + ".png\" />" + "<span class=\"left\" onclick=\"odejmij()\"></span>" + "<span class=\"right\" onclick=\"dodaj()\"></span>";
		document.getElementById("slider").innerHTML = plik;
		numer--;
		if (numer>4) numer = 1;
		if (numer<1) numer = 4;			
		zmienslajd();	
	}
	function schowaj()
	{
		$("#slider").fadeOut(500);
	}
	function zmienslajd()
	{
		if (numer>4) numer = 1;
		var plik = "<img src=\"images/" + numer + ".png\" />" + "<span class=\"left\" onclick=\"odejmij()\"></span>" + "<span class=\"right\" onclick=\"dodaj()\"></span>";		
		document.getElementById("slider").innerHTML = plik;
		numer++;
		$("#slider").fadeIn(500);
		timer = setTimeout("zmienslajd()", 5000);
		timer2 = setTimeout("schowaj()", 4500);
	}
	
</script>
</body>
</html>

komentarz 31 października 2016 przez xmentor Nałogowiec (49,520 p.)

Na początku zacznij od drobnej poprawy kodu:

w setTimeout nie przekazuj nazwy funkcji jako stringa, możesz to zrobić tak:

setTimeout(schowaj, 1000);

albo

setTimeout(function() {
  schowaj();
}, 1000)

Wszystko jest w globalnym scope, opakuj kod w IIFE http://blog.gutek.pl/2014/01/13/iife-immediately-invoked-function-expression/
zamiast zmieniać wnętrze diva o id slider, to można w HTMLu dodać pierwszy slajd a dla znacznika img nadać klase/id. Następnie złapać element w JS i podmieniać jedynie wartość atrybutu src.
zamiast generować przyciski JSem to utwórz je w HTMLu i podepnij zdarzenie przez addEventListener.

komentarz 31 października 2016 przez dewe Gaduła (4,300 p.)

Poprawie kod prawdopodobnie w niedalekiej przyszłości, natomiast na ten moment chciałbym skończyć tego Slider'a w takiej postaci jakiej jest, ale nie mogę sobie poradzić z tym fadeIn i fadeOut przy przelaczaniu :p

komentarz 31 października 2016 przez MaLibu Nowicjusz (120 p.)

Nie dam Ci gotowego rozwiązania, ale dam kilka porad. Możesz je wykorzystać jeśli chcesz.

- rozdziel js, css, html na osobne pliki
- wywal funkcję onload z body i zastąp ją funkcją jquery (np. $( document ).ready())
- przyciski dodaj od razu do pliku html (nie zmieniaj ich z przeładowaniem slidera)
- zdjęcia też dodaj do pliku html'owego
- użyj css3 do animacji fadeIn, fadeOut

coś w tym stylu ;) http://codepen.io/anon/pen/PGMwqx?editors=1111

komentarz 31 października 2016 przez dewe Gaduła (4,300 p.)

W zasadzie to postaram sie jakos skorzystac wlasnie z CSS3, zapomnialem, ze tez istnieje taka mozliwosc :)

https://daneden.github.io/animate.css/

dzieki za przypomnienie, w wolnej chwili wprowadze to i sprawdze jak wyjdzie :)

Zaloguj lub zarejestruj się, aby skomentować.

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

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci