• 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

0 głosów
121 wizyt
pytanie zadane 28 sierpnia 2018 w JavaScript, jQuery, AJAX 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 Szeryf (91,270 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 Szeryf (91,270 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 Szeryf (91,270 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 Szeryf (91,270 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 Szeryf (91,270 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 Szeryf (91,270 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 Szeryf (91,270 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ź 681 wizyt
pytanie zadane 17 sierpnia 2015 w JavaScript, jQuery, AJAX przez Eimens Maniak (68,800 p.)
0 głosów
0 odpowiedzi 125 wizyt
pytanie zadane 21 marca 2018 w JavaScript, jQuery, AJAX przez pawel1115 Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 50 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

63,266 zapytań

109,521 odpowiedzi

228,793 komentarzy

43,505 pasjonatów

Przeglądających: 180
Pasjonatów: 2 Gości: 178

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.

...