• 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
129 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 67 wizyt
pytanie zadane 18 listopada 2018 w JavaScript, jQuery, AJAX przez Freelance Początkujący (340 p.)
0 głosów
1 odpowiedź 131 wizyt
pytanie zadane 29 sierpnia 2016 w JavaScript, jQuery, AJAX przez dartespl Użytkownik (830 p.)
–1 głos
1 odpowiedź 128 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

65,755 zapytań

112,393 odpowiedzi

237,319 komentarzy

46,700 pasjonatów

Przeglądających: 143
Pasjonatów: 0 Gości: 143

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.

...