Na początek wyznam, że o JS nie mam zielonego pojęcia.
Jest to ważne o tyle, że nawet korzystając z wyszukiwarki nie wiem, czego tak naprawdę szukać, a co gorsza - jak to zastosować...
Problem:
Mam stronę, której statyczna treść jest generowana poprzez zapytanie SQL wykonywane na serwerze bazy danych - w efekcie otrzymuję kod html. (W załączonym pliku jest bardzo okrojony - w rzeczywistości zawiera dużo więcej informacji.)
Zapytanie jest wykonywane cyklicznie poprzez cron'a, bo dane się okresowo zmieniają, przekodowywane na utf-8, i wysyłane na serwer hostujący. Strona wyświetlana jest w przeglądarce w trybie "Kiosk" i co pół godziny automatycznie się w przeglądarce odświeża.
"Dobre dusze" z pokrewnych organizacji podzieliły się ze mną arkuszem stylu oraz skryptami, które pozwalają wyświetlać treść w postaci "bloków" w sposób i w formacie, który jest dla mnie odpowiedni.
Do tego momentu wszystko rozumiem, wszystko potrafię (poza modyfikacją skryptu .js), no i wszystko działa.
Chciałbym jednak jeszcze dodatkowo dodać do strony timer typu countdown oraz licznik dla wyświetlanego "bloku" treści i liczbę "bloków" treści znajdujących się w pliku html.
I tu utknąłem...
W sieci jest co prawda multum przykładów timerów - i co najmniej kilka z nich próbowałem "ożenić" z kodem w skrypcie przewin.js, który mam do dyspozycji.
W najlepszym wypadku osiągnąłem jednak tylko to, że co prawda timer się aktualizował, ale nie zmieniały się wyświetlane "bloki". W przypadku "średnim" timer aktualizował się tylko dla pierwszego "bloku". A w najgorszym... spowodowałem crash przeglądarki ;-)
Natomiast na temat licznika i liczby "bloków" nawet nie wiem czego szukać...
Wydaje mi się, że trzeba byłoby w skrypcie policzyć ilość wystąpień
Kod
<div class="sp">
w dokumencie html (bo ten element identyfikuje w nim poszczególne "bloki" treści, a w trakcie wyświetlania odpowiednio inkrementować liczbę już wyświetlonych bloków.Ważne:
Liczba "bloków" treści jest zmienna, więc nie można ustawić jej w skrypcie jako stałej.
Całość powinna działać w ten sposób, że timer powinien odliczać "w dół" czas do wyświetlenia kolejnego "bloku" (w załączonym pliku czas jest ustawiony na 5 sekund, w rzeczywistości będzie to coś z przedziału 15-30 sekund), natomiast w przypadku osiągnięcia ostatniego bloku cały "przewijanie" powinno cyklicznie się powtarzać od pierwszej pozycji do chwili automatycznego przeładowania strony, a po przeładowaniu oczywiście rozpocząć od jedynki.
Z niejakim wstydem muszę wyznać, że najbardziej będę wdzięczny za "gotowca" lub odesłanie do naprawdę łopatologicznie wyłożonej teorii - osobiście straciłem przez ten banalny przecież problem cały weekend, z zerowymi efektami...
Link do jsfiddle.net ze "zobrazowaniem" problemu:
https://jsfiddle.net/ysaych41/3/
Uwaga: miejsca na timer i licznik są daaaleko po prawej - strona ma pracować w rozdzielczości 1920x1200.
Skrypt na jsfiddle.net jest zapisany w pliku o nazwie przewin.js
Dodatkowo wykorzystywany jest jquery-1.9.1.js