• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

problem z przyciskiem prev.

VPS Starter Arubacloud
+2 głosów
131 wizyt
pytanie zadane 31 maja 2021 w JavaScript przez kamilczas Nowicjusz (140 p.)
zmienione kategorie 31 maja 2021 przez Arkadiusz Waluk

Witam mam problem z przyciskiem prev. Nie mam pojęcia jak go zrobić w js.

HTML

<img id="car" src="car1.jpg">
<input class="prev" type="button" value="❮ Prev" onclick="prev();">
<input class="next" type="button" value="Next ❯" onclick="next();">

JAVASCRIPT

var i = 1;
var images = [];
const img=document.getElementById("car");

images[0]="car1.jpg";
images[1]="car2.jpg";
images[2]="car3.jpg";
images[3]="car4.jpg";

function next(){
  img.src = images[i];
  if(i < images.length -1){
    i++;
  }
  else {
    i=0;
  }
}

2 odpowiedzi

+2 głosów
odpowiedź 31 maja 2021 przez VBService Ekspert (251,250 p.)
edycja 1 czerwca 2021 przez VBService

Dokładnie, chyba najprościej jak już napisał @SzkolnyAdmin

ale nie inkrementujesz (i++)  indeksu obrazka, tylko dekrementujesz (i--)

Dwa dni temu podobny "problem": tutaj.  wink

Proponuję wersję - 2.1 DRY.  wink

 

czyli,

<img id="car" src="https://picsum.photos/id/1/200/300">
<input class="prev" type="button" value="❮ Prev" onclick="prev();">
<input class="next" type="button" value="Next ❯" onclick="next();">
const img = document.getElementById('car');
const images = [
  'https://picsum.photos/id/1/200/300',
  'https://picsum.photos/id/2/200/300',
  'https://picsum.photos/id/3/200/300',
  'https://picsum.photos/id/4/200/300',
  'https://picsum.photos/id/5/200/300'
];
const NEXT = 1, PREV = -1;
let i = 0;

function next() {
  changeImage(NEXT);
}
function prev() {
  changeImage(PREV);
}

function changeImage(step) {
  i += step;
  if (i > images.length - 1) {
    i = 0;
  } else if (i < 0) {    
    i = images.length - 1;
  }
  img.src = images[i];
}

 

komentarz 31 maja 2021 przez kamilczas Nowicjusz (140 p.)

Dziekuje za pomoc ! wink

+1 głos
odpowiedź 31 maja 2021 przez SzkolnyAdmin Szeryf (86,280 p.)
Generalnie jak funkcję next, ale nie inkrementujesz (i++)  indeksu obrazka, tylko dekrementujesz (i--). Gdy dojdziesz do obrazka z indeksem 0, kolejne kliknięcie wstawia obrazek z maksymalnym indeksem.

Podobne pytania

0 głosów
0 odpowiedzi 166 wizyt
pytanie zadane 6 października 2022 w JavaScript przez Farmer Obywatel (1,150 p.)
+1 głos
3 odpowiedzi 284 wizyt
pytanie zadane 20 stycznia 2021 w JavaScript przez Martita Bywalec (2,470 p.)
0 głosów
0 odpowiedzi 103 wizyt
pytanie zadane 5 listopada 2020 w JavaScript przez Bazzam Użytkownik (810 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...