Przyciski wstecz dalej - nie działający kod

0

Proszę o wskazówki jak poprawnie zbudować kod JS dla przycisków dla slidera tekstu

Skrypt generalnie wyświetla kolejne elementy listy przez zadany czas.
Próbuje dodać przyciski aby można było manualnie przejść między slajdami niestety nie udaje mi się.

var current = 0;
var  slides = document.getElementsByTagName("li");
var p = document.getElementById("prev");
var n = document.getElementById("next");

function do(){
setInterval(function() {

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;

}, 5500);

function getPrev() 
{
	current = (current != 0) ? current - 1 : slides.length;
	slides[current].style.opacity = 1;
	
}

function getNext()
{
 	current = (current = slides.length - 1) ? 0 : current + 1; 
 	slides[current].style.opacity = 1;
}

p.onclick = getPrev();
n.onclick = getNext();


<div id="slajdy">
    <div id="bar"><a id="prev" href="#">&lt;</a><a id="next" href="#">&gt;</a></div>
        <ul>
                    	<li> ... </li>
                        <li> ... </li>
                        <li> ... </li>
                        <li> ... </li>
        </ul>
</div>
</div>
3

Z zamieszczonych fragmentów nie widać w jakiej kolejności są wykonywane skrypty i parsowanie dokumentu. Najlepiej odpalić debuger w Chrome ustawić breakpointy na var p = document.getElementById("prev"); i var n = document.getElementById("next"); - zobaczyć, czy otrzymujemy sensowne wartości, breakpointy na function getPrev() i function getNext() pozwolą sprawdzić, czy te funkcje są w ogóle wywoływane oraz sprawdzić, czy są tam oczekiwane wartości.

W function getPrev() powinno być current = (current != 0) ? current - 1 : slides.length - 1;. Dajemy minus 1, bo N elementów oznacza elementy od 0 do N-1.

W function getNext() z kolei powinno być current = (current == slides.length - 1) ? 0 : current + 1;. Masz operator = zamiast ==.

3

Czy jesteś w stanie umieścić na http://jsfiddle.net i dać nam tutaj link do działającego przykładu tego, co już masz? W sensie - bez strzałek, ale z jakąś treścią i przewijaniem sterowanym timerem?

1

@cerrato: https://jsfiddle.net/meqfgthu/10/ sam działający kod wyświetlania kolejnych elementów listy
@-daniel- próbowałam ustawić breakpointy w debugerze chrome ale nic nie pokazuje, a po paru obiegach kodu zaczynają znikać litery w debugerze (jest widoczna co któraś albo tylko część litery np. nie widać napisu Not paused jak na początku tylko " o s t" :/ Chyba skrypt tak to psuje bo przeglądarka aktualna i na innych projektach nie robi takich cudów

0

To jeszcze jedno pytanie, żeby doprecyzować - czy przyciski mają być niezależnie od automatycznego przewijania, a może ręczna kontrola ma wstrzymać automatyczne przełączanie? Napisz, jak to widzisz i co ma się dziać w chwili, w której ktoś zacznie klikać w strzałki.

0

@cerrato dziękuje za zainteresowanie tematem :)

Chciałabym żeby tekst leciał sam sobie co jakiś czas się zmieniając (raczej wolno), a w dowolnej chwili przycisk wracał / przełączał do przodu o ten jeden element listy i znowu sobie ten czas na tym elemencie leciał :)

2

https://jsfiddle.net/385usra4/ - rzuć okiem, czy o takie coś Ci chodziło :)

Napisałem "na szybko", jakby się chciało to zrobić porządniej, to po pierwsze - wypadałoby wydzielić część sprawdzającą do osobnych funkcji, ponadto przekazywanie informacji o przesunięciu w postaci liczbowego parametru funkcji jest słabe (aczkolwiek - działa :D) - lepsze by było zrobienie czegoś w stylu ZmienSlajd(przod); - tylko nie mam teraz czasu, żeby się bawić. Ważne, że działa :) Dobrym standardem jest też stosowanie nazw (zmiennych, funkcji itp.) w języku angielskim, aczkolwiek jesteś początkująca, więc nie jest to poważny grzech, a przynajmniej łatwiej CI zrozumieć kod.

Rzuć okiem czy rozumiesz, co tam jest napisane i jakby cokolwiek było niejasne, to śmiało pytaj :)

1

@cerrato dziękuję ! :) Już sobie to przyswajam :)

2

@Sandra W Twoim kodzie masz też p.onclick = getPrev(); a powinno być p.onclick = getPrev; bez nawiasów, bo nie wywołujesz ale chcesz przypisać funkcję.

0

@-daniel- dziękuję :) dopiero się uczę :) będę pamiętać :) Może jakoś uda mi się za jakiś czas i mój własny kod uruchomić :)

2

Z kawałków Twojego kodu zrobiłem takie coś:
https://jsfiddle.net/4L16x08s/3/

Zmienna skip na jeden czasookres blokuje automat przełączający, dzięki czemu nie przeszkadza on użytkownikowi, gdy zmienia slajdy ręcznie.

Teraz widzę, że automat (funkcja w setInterval) mogłaby używać getNext - uniknięcie powtarzania kodu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1