problem z przyciskiem prev.

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

odpowiedź 31 maja 2021 przez VBService Ekspert (253,280 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.

Proponuję wersję - 2.1 DRY.

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];
}