Przyciski wstecz dalej - nie działający kod

Odpowiedz Nowy wątek
2019-05-13 15:19

Rejestracja: 3 lata temu

Ostatnio: 1 dzień temu

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>

Pozostało 580 znaków

2019-05-13 15:46

Rejestracja: 1 rok temu

Ostatnio: 2 tygodnie temu

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 ==.

edytowany 4x, ostatnio: -daniel-, 2019-05-13 15:51

Pozostało 580 znaków

2019-05-13 15:47
Moderator Kariera

Rejestracja: 2 lata temu

Ostatnio: 17 godzin temu

Lokalizacja: Poznań

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?


Naczelny forumowy hejter Apple

That game of life is hard to play, I'm gonna lose it anyway
The losing card I'll someday lay, So this is all I have to say

Pozostało 580 znaków

2019-05-14 09:44

Rejestracja: 3 lata temu

Ostatnio: 1 dzień temu

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

Pozostało 580 znaków

2019-05-14 09:46
Moderator Kariera

Rejestracja: 2 lata temu

Ostatnio: 17 godzin temu

Lokalizacja: Poznań

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.


Naczelny forumowy hejter Apple

That game of life is hard to play, I'm gonna lose it anyway
The losing card I'll someday lay, So this is all I have to say

Pozostało 580 znaków

2019-05-14 09:50

Rejestracja: 3 lata temu

Ostatnio: 1 dzień temu

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ł :)

Pozostało 580 znaków

2019-05-14 10:10
Moderator Kariera

Rejestracja: 2 lata temu

Ostatnio: 17 godzin temu

Lokalizacja: Poznań

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 :)


Naczelny forumowy hejter Apple

That game of life is hard to play, I'm gonna lose it anyway
The losing card I'll someday lay, So this is all I have to say
edytowany 2x, ostatnio: cerrato, 2019-05-14 10:15

Pozostało 580 znaków

2019-05-14 10:15

Rejestracja: 3 lata temu

Ostatnio: 1 dzień temu

1

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

rozumiem, że to "dziękuję" oznacza, że masz to, czego potrzebowałaś? :) - cerrato 2019-05-14 10:16
Zdecydowanie :) Na tą chwilę na moje potrzeby wystarczające :) - Sandra 2019-05-14 10:18

Pozostało 580 znaków

2019-05-14 10:15

Rejestracja: 1 rok temu

Ostatnio: 2 tygodnie temu

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ę.

Słuszna uwaga. Na jsfiddle tego nie było, a kodu z pierwszego posta nie analizowałem. - cerrato 2019-05-14 10:16

Pozostało 580 znaków

2019-05-14 10:17

Rejestracja: 3 lata temu

Ostatnio: 1 dzień temu

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ć :)

Pozostało 580 znaków

2019-05-14 10:24

Rejestracja: 1 rok temu

Ostatnio: 2 tygodnie temu

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.

edytowany 3x, ostatnio: -daniel-, 2019-05-14 10:30
Dziękuję :) też zaraz prześledzę dokładnie żeby wiedzieć na przyszłość i taki sposób :) - Sandra 2019-05-14 10:32

Pozostało 580 znaków

Odpowiedz

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