Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Slider JS

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Slider JS

Post 19.11.2016, 00:01:20

Witam, zrobiłem slider w jsie. Po prostu uczę się tego języka i nie chciałem korzystać z frameworków.
Chcę zasięgnąć opini nt. kodu. Chciałbym mniej więcej uświadomić samego siebie jakie są standardy i jak nie pisać.

kod
live demo

Tak, zdaję sobie sprawę, że ta animacja nie jest idealna :) Pracuję nad tym.
XaooBBx
Posty: 41
Dołączył(a): 22.09.2016

Re: Slider JS

Post 20.11.2016, 16:19:46

1. Animacja faktycznie kiepsko zrobiona, ale czekam na efekty dalszej pracy.
Główne zarzuty animacji to:
- przełączanie się po zdjęciach po raz pierwszy wykonuje animację ale nadal widać poprzednie zdjęcie, a potem nagle pojawia się nowe, bo przeglądarka potrzebowała czasu na jego załadowanie. Może trzeba pomyśleć o preloadzie kolejnego zdjęcia przed wykonaniem animacji
- szybkie przełaczanie się po zdjęciach, bez czekania na koniec animacji, wygląda kiepsko
- sposób implementacji animacji budzi sporo zastrzeżeń. Czas trwania animacji nie zależy od czasu tylko od stopnia przezroczystości, zaś całość jest niekonfigurowalna, więc nie da się łatwo zmienić czasu trwania animacji bez edycji kodu w kilku miejscach
- posiadanie tylko jednego <img> mocno ogranicza możliwości animacji do prostych efektów

2. Nie masz żadnej struktury danych, w której definiowałbyś zdjęcia i ich opisy. Całość masz na sztywno zakodowane w chooseImage. Wywołanie init() kompletnie oderwane od danych, tzn. jak będziesz chciał dodać kolejne zdjęcia, to musisz edytować 2 miejsca w kodzie – funkcję chooseImage i miejsce wywołania init().

3. skrypt jest skazany na możliwość użycia go tylko raz na stronie. Gdybyś chciał mieć z jakiegoś powodu 2 slidery na stronie albo będziesz musiał zduplikować kod albo go modyfikować.

4. _nrZdj=n;
_iloscZdj=k;

Wyciek danych do kontekstu globalnego

5. dlaczego parametr funkcji chooseImage ma tak dziwną nazwę, odstającą od reszty kodu? Czy ten parametr jest jakiś szczególny? Jedyne jeszcze akceptowane użycie _ na początku nazwy jestem w stanie zaakceptować dla _nrZdj i _iloscZdj (obecnie tworzone w init(), ale jak pisałem w 4, powinieneś je zdefiniować jako zmienne całego "modułu"), bo one mają kluczowe znaczenie dla poprawnego działania całego slidera.

6. nie podoba mi się, że część interfejsu slidera jest w HTMLu (strzałki wstecz i dalej, itd.) a część generowana przez skrypt (<img> ze zdjęciem). Wybrałbym jedno podejście i się go trzymał

7. może warto też przemyśleć, żeby przepisać slidera tak, żeby kod JavaScript był odpowiedzialny za zarządzanie stanem slidera (bieżący slajd, itd.), zaś animacje wykonać samym CSSem na podstawie stanu slidera? Tzn kod JS ustawiałby odpowiednie klasy, zaś CSS miałby dla tych klas definicje animacji i przejść. Wtedy edytując tylko CSS mógłbyś zamieniać efekty przejścia na inne. W razie zainteresowania mogę pokazać przykładowy kod.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19571
Dołączył(a): 14.04.2002

Re: Slider JS

Post 20.11.2016, 20:23:31

ad.1
Tutaj mam problem. Powiedziałbym największy. Na lokalnym serwerze działa znacznie lepiej, ale to dlatego, że nie ma właśnie opóźnienia z wczytywaniem zdjęć z serwera. Sama animacja jest kiepska, ale będę czytał i szukał jak to poprawić.

ad.2
Myślałem nad sposobem wrzucenia wszystkich zdjęć w markupie wraz z opisami. Potem po prostu operować na obiekcie tablico-podobnym (jedno zdjęcie odpowiada jednej klasie np. o nazwie item). Co o tym sądzisz?

ad.3 Zgadza się. Robiąc nowy spróbuję zrobić go bardziej intuicyjnie.

ad.4 To także wiąże się ze złym kodem. Nie wpadłem na pomysł jak wyciągnąć te dane na zewnątrz, więc dałem je globalnie. Pomyśle nad tym.

ad.5 Użyłem go w takiej formie, aby dać do zrozumienia, że jest to zmienna prywatna. Wiem, że powinienem robić to inaczej. Zrobić moduł (który ciężko mi zrozumieć, nie mam pojęcia dlaczego.. ;o. Przecież to zwykły obiekt, racja?) dzięki czemu mogę mieć zmienne prywatne. Są to moje początki więc, chciałem po prostu napisać coś, aby działało.

ad.6 Pisałem o tym w adnotacji nr 2.

ad.7 Czysta funkcjonalność jak przełączanie pomiędzy zdjęciami, animacja w JS, reszta w HTML. Tak to rozumiem.
XaooBBx
Posty: 41
Dołączył(a): 22.09.2016

Re: Slider JS

Post 20.11.2016, 20:40:25

Chciałbym dodać do 1, że jakbym miał w markupie wszystkie zdjęcia to problem z opóźnieniem powinien znikać, prawda? W końcu wszystko byłoby załadowane.
XaooBBx
Posty: 41
Dołączył(a): 22.09.2016

Re: Slider JS

Post 20.11.2016, 21:18:47

Szkoda, że nie idzie edytować postów.. Tutaj wspomniany markup: link
XaooBBx
Posty: 41
Dołączył(a): 22.09.2016

Re: Slider JS

Post 20.11.2016, 22:40:06

To jest jedno z podejść. Jedyne co musisz mieć na względzie, to im więcej slajdów dodasz, tym dłużej strona się będzie ładowała… jeśli dla Ciebie akceptowalne, to OK, jeśli nie, to trzeba kombinować na inne sposoby. Zaletą takiego podejścia jest, że treść jest w HTMLu, jest indeksowalna przez roboty wyszukiwarek, itd.

Co do punktu 7, miałem na myśli coś takiego https://jsfiddle.net/rafael/6hb8zufw/ (skrypt zrobiłem już kiedyś na potrzeby innego użytkownika tego forum).
Masz 3 slidery. Jest 1 kod JS, zaś efekty przejścia zdefiniowane w CSS. Przeglądarka odpowiada za poprawne przeprowadzenie animacji (bo korzystamy z wbudowanych możliwości CSS), więc samemu nie trzeba się męczyć, żeby zrobić to poprawnie.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19571
Dołączył(a): 14.04.2002

Re: Slider JS

Post 20.11.2016, 23:09:24

No podejście zdecydowanie lepsze. W sumie i proste.. dodajemy i usuwamy klasy dzięki czemu animacje można ustawić w css tak jak pisałeś. Jutro zabiorę się za to i zdam relację.
XaooBBx
Posty: 41
Dołączył(a): 22.09.2016

Re: Slider JS

Post 20.11.2016, 23:38:46

Mam jeszcze szybkie pytanie, bo nie mam możliwości sprawdzenia kodu u siebie. Jeżeli mamy klasę gdzie tak jak u Ciebie opacity jest na 0 (i jest przypisana od razu w markupie) i dodajemy kolejną z opacity na 1, to która jest brana pod uwagę? Wychodzi na to, ze ta druga?
XaooBBx
Posty: 41
Dołączył(a): 22.09.2016

Re: Slider JS

Post 21.11.2016, 23:57:26

Hm, nie bardzo wiem jak pobrać kolejne zdjęcie do zmiennej. Wiem, że ty to zrobiłeś, ale nie bardzo rozumiem.
XaooBBx
Posty: 41
Dołączył(a): 22.09.2016

Re: Slider JS

Post 22.11.2016, 02:40:48

Dobra, jak na razie zrobiłem coś takiego. Myślę także nad dodaniem przycisków play i stop. Zobaczę.
LINK
kod

No i powiem krótko. Robienie animacji w JS było idiotyczne. Ale jak to się mawia. Człowiek uczy się na błędach.
XaooBBx
Posty: 41
Dołączył(a): 22.09.2016


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 6 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50332 zarejestrowanych użytkowników.
Najnowszy użytkownik: Tamela93


Nasi użytkownicy napisali:

  • 935475 wiadomości
  • w 246488 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)