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

[Kurs JS] Slider z opóźnieniem

VPS Starter Arubacloud
0 głosów
354 wizyt
pytanie zadane 28 sierpnia 2018 w JavaScript przez vneb Początkujący (490 p.)

Cześć();

Po drugim odcinku kursu JavaScript przerobiłem trochę slidera z odcinka, tak żeby z tablicy plików wybierał losowo 3 unikalne obrazki i wstawiał je na stronę. Do tego jest fadeIn i fadeOut. I teraz mam chęć dalszego podrasowania na moje widzimisię w ten sposób żeby każdy obrazek wczytywał się osobno: pierwszy od razu z fadein, drugi dopiero po załadowaniu pierwszego - nie chodzi o to czy został już pobrany do przeglądarki (to będzie pewnie następna faza), tylko o małe opóźnienie w ładowaniu kolejnego - i trzeci po załadowaniu drugiego. Każdy z nich po załadowaniu ma zacząć odliczać powiedzmy 5 sekund i się przeładowywać na kolejny losowy. Ogólnie żeby to wyglądało na falę in i falę out. I tu prośba o podpowiedź jak się za to zabrać, bo póki co to nie mam pomysłu od czego zacząć.

Dodam, że stary ze mnie gość, a pracę z JS dopiero zaczynam. Kiedyś, dawno temu liznąłem trochę TP, potem C++ i PHP na własne skromne potrzeby, więc nie jestem typowym laikiem typu ctrlC-ctrlV, ale też proszę nie pisać do mnie jak do programisty. I nie chodzi mi o podanie gotowego kodu, bo ten sam chcę napisać, tylko o jakiś schemat ideowy jak to ugryźć.

Docelowo lista plików będzie pobierana z serwera - pewnie z użyciem PHP - i przekazywana do tablicy w JS, ale na razie pracuję lokalnie - chyba że jest jakiś lepszy sposób.

Działanie można zobaczyć na stronie: http://mytrucksphoto.panio.pl - to tylko szablon-wprawka, bo zaczynałem od podstaw CSSa, a potem obejrzałem dwa odcinki z JS.

Kod do mojego slidera:

var tab = ['daf-01','daf-02','daf-03','daf-04','daf-05','daf-06',
				 'man-01','man-02','man-03','man-04','man-05',
				 'mercedes-01','mercedes-02','mercedes-03',
				 'scania-01','scania-02',
				 'renault-01','renault-02',
				 'volvo-01',
				 'naczepa-01',
				 'zbiorowe-01','zbiorowe-02'];
var tab1 = [];

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

function losuj()
{

	var plik;
	var nr;
	var pokaz = '';

		if(tab.length<3) 
			{ 
			    tab = tab.concat(tab1);
				tab1 = [];
			}

			for(i=0; i<3; i++)
			{
				nr = Math.floor(Math.random()*tab.length);
				plik = tab.splice(nr,1); 
				tab1.push(plik);  
				pokaz = pokaz+'<a class="example-image-link" href="foto/'+plik+'-1200.png" data-lightbox="example-set" data-title=""><img src="foto/'+plik+'-300.png" alt="'+plik+'" class="example-image" />';
			}	

		
 	$('#slider').fadeIn(500);	
	document.getElementById('slider').innerHTML = pokaz;
	setTimeout('losuj()',5000);
	setTimeout('schowaj()',4500);		
}
	

 

komentarz 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)

Na localhoscie też można używać php i sql. Trzeba tylko zainstalować  pakiet np. xampp

komentarz 28 sierpnia 2018 przez vneb Początkujący (490 p.)
Nie chce mi się. PHP w tym zakresie znam, a JS dopiero się uczę. Wiedziałem, że ktoś o XAMPPie napisze, ale w pytaniu poprosiłem o pomoc ze slajderem. No offence.
komentarz 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)
Napisałem to w komentarzu, więc pytanie jest nadal bez odpowiedzi. Nie zrozumiałem trochę tego, że pracujesz lokalnie bo uczysz się js i nie chcesz używać php.

1 odpowiedź

0 głosów
odpowiedź 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)

Potrzebujesz setTimeout()

komentarz 28 sierpnia 2018 przez vneb Początkujący (490 p.)
edycja 28 sierpnia 2018 przez vneb
setTimeout już jest używane, więc tyle wiem. Nie mogę wymyślić schematu ideowego, bo marny ze mnie "programista", wszystko do mnie dociera bardzo powoli. Z kodem już jakoś sobie poradzę.

Żeby była jasność: ten slider w pytaniu zanim zrobiłem kod napisałem tak:

1. wylosować numer z tablicy plików
2. wyjąć jeden plik z tablicy przy pomoc splice() żeby od razu usunąć z głównej i zapisać go do nowej.
3. zapamietać w zmiennej ten string
3. powtórzyć 1 jeszcze dwa razy.
4. gdy w tablicy pierwszej zostaną mniej niż3 elementy skopiować resztę tablicy drugiej do pierwszej i drugą wyczyścić.
5. wrzucić wszystko w document.getElementByID("id").innerHTML i cieszyć się jak głupi bateryjką jeśli zadziała.

 

Ale do tego potrzeba było zaledwie półtorej funkcji, a z tym wyświetlaniem sekwencyjnym to już pewnie więcej trzeba i tego nie ogarniam póki co.
komentarz 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)
Przeprasza Cię, ale przeglądam forum na telefonie i nie zauważyłem , że w bloczku jest więcej linijek js
komentarz 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)

A może dynamiczne dodawanie i usuwanie elementów do drzewa DOM + setTimeout dla funkcji wstawiającej i usuwającej

DOM dodawanie i usuwanie elementów

komentarz 28 sierpnia 2018 przez vneb Początkujący (490 p.)
Chyba wpadłem na trop. Wszystkie zdjęcia ładują się tej samej klasie <li> #slider, ale jak dla każdego zrobię osobną klasę #slider1, #slider2 i #slider3 i wrzucę ją do <a href> albo <img> to wywołam sobie je pokolei z timeoutem w pętli. Nie wiem czy to będzie eleganckie rozwiązanie, ale w teorii wydaje mi się, że powinno zadziałać.
komentarz 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)
(hash)# to id klasa to .(kropka)
komentarz 28 sierpnia 2018 przez vneb Początkujący (490 p.)
Przejęzyczenie spowodowane eureką :P
komentarz 28 sierpnia 2018 przez pablop76 VIP (123,060 p.)

Zdecydowanie ładowanie jak i usuwanie każdego zdjęcia powinno odbywać się osobno, dlatego 

div.appendChild(el);
div.removeChild(el);

umieszczone w funkcjach odpalanych z opóźnieniem wykonujących się w pętlach i całość odpalana jest w np. pętli nieskończonej, lub funkcji rekurencyjnej to mogłoby wypalić. 

 

Podobne pytania

0 głosów
1 odpowiedź 1,221 wizyt
pytanie zadane 17 sierpnia 2015 w JavaScript przez Eimens Maniak (69,240 p.)
0 głosów
0 odpowiedzi 1,212 wizyt
pytanie zadane 21 marca 2018 w JavaScript przez pawel1115 Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 137 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

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

...