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

Slider z 2 odcinka kursu JS - widoczne tło przy zmianie slajdu

0 głosów
76 wizyt
pytanie zadane 15 listopada 2018 w JavaScript, jQuery, AJAX przez Ghost11 Początkujący (250 p.)

Cześć!

W drugim odcinku kursu JavaScript na Pasja Informatyki tworzymy slider. W trakcie zmiany slajdu najpierw zanika widoczny slajd, widać przez chwilę tło strony i dopiero pokazuje się kolejny slajd. Chciałbym wyeliminować ten "przestój" w postaci widoku tła strony, czyli zrobić tak, aby ten następny slajd zaczął się pokazywać już w trakcie zaniku poprzedniego. Jest to pewnie banalne, ale zaciąłem się na tym. Próbowałem już wszystkiego i nic. Zero pomysłu. Prosiłbym o pomoc jak to wykonać.


Z góry dzięki!

Kod slidera

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
			body
			{
				background-color: #222222;
				font-size: 24px;
				color: white;
			}
		</style>
		
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		
		<script type="text/javascript">
		
			var numer = Math.floor(Math.random()*5)+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>5) numer=1;
				
				var plik = "<img src=\"slajdy/slajd" + numer + ".png\" />";
				
				document.getElementById("slider").innerHTML = plik;
				$("#slider").fadeIn(500);
				
				timer1 = setTimeout("zmienslajd()", 5000);
				timer2 = setTimeout("schowaj()", 4500);
			
			}
			
		</script>
		
	</head>
	<body onload="zmienslajd()">
	
		<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>
		
		<div id="slider"></div>
		
	</body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 15 listopada 2018 przez Grzegorz :> Dyskutant (8,010 p.)
W tego rodzaju sliderze wykonujesz operacje na jednym elemencie. Do uzyskania efektu, o którym mówisz musisz najłatwiej by było zrobić drugi div zawierający poprzednie zdjęcie i odpowiednio ustawić animacje przejścia. Gdy jeden znika to od razu pojawia sie drugi.
komentarz 15 listopada 2018 przez Ghost11 Początkujący (250 p.)
Tak też podejrzewałem... Dzięki za odpowiedź!
komentarz 15 listopada 2018 przez Grzegorz :> Dyskutant (8,010 p.)
Możesz też do obecnego diva dodać 2 zdjęcia i nimi manipulować. Zamiast użyć funkcji fadeIn/fadeOut dla diva, mozesz ich użyć dla znaczników <img>

Podobne pytania

0 głosów
0 odpowiedzi 66 wizyt
pytanie zadane 18 listopada 2018 w JavaScript, jQuery, AJAX przez Freelance Początkujący (360 p.)
0 głosów
1 odpowiedź 121 wizyt
pytanie zadane 29 sierpnia 2016 w JavaScript, jQuery, AJAX przez dartespl Użytkownik (830 p.)
–1 głos
1 odpowiedź 125 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

63,266 zapytań

109,521 odpowiedzi

228,794 komentarzy

43,514 pasjonatów

Przeglądających: 179
Pasjonatów: 4 Gości: 175

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.

...