Problem z nadawaniem wartości zmiennej w JavaScript

Question

Witom ;p

mam pewien problem - chciałem zrobic sobie wlasny slider na stronke w javascripcie (https://slider.ugu.pl/),

otóż, wszystko dziala ok poza powrotem do poprzedniego zdjecia - mam problem ze zdefiniowaniem zmiennej numerm, by automatycznie jesli mam np. 7 numer slajdu, to zeby cofalo o jeden tą zmienną, a jak jest jeden, to zeby zapodawalo siodemke ;p, oto kodzik (choc i tak go macie na ww. stronce lul):

var numerm = "1"-1;

var numer = "1"+1;

function fwd()

{

  numerm; if (numer >1) numer = 7;

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/" + numer + ".png')";

}

function jedynka()

{

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/1.png')";

}

function dwojka()

{

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/2.png')";

}

function trojka()

{

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/3.png')";

}

function czworka()

{

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/4.png')";

}

function piatka()

{

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/5.png')";

}

function szostka()

{

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/6.png')";

}

function siodemka()

{

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/7.png')";

}

function fwd()

{

  numer++; if (numer >7) numer = 1;

  var element = document.getElementById("sliderek");

  element.style.backgroundImage = "url('img/" + numer + ".png')";

}

#sliderek

{

  background-image: url("img/1.png");

  background-repeat: no-repeat;

  background-size: cover;

  border: 1px solid;

  border-radius: 5px;

  height: 400px;

  margin-left: auto;

  margin-right: auto;

  width: 600px;

}

<div id="sliderek">

<br>

</div>


<button type="button" onclick="prev()">Poprzedni</button>

<button type="button" onclick="jedynka()">1</button>

<button type="button" onclick="dwojka()">2</button>

<button type="button" onclick="trojka()">3</button>

<button type="button" onclick="czworka()">4</button>

<button type="button" onclick="piatka()">5</button>

<button type="button" onclick="szostka()">6</button>

<button type="button" onclick="siodemka()">7</button>

<button type="button" onclick="fwd()">Następny</button>

poza tym to nie czepiac sie tego ze ten slider dziala na bgcolor, tak tylko se do matury ćwikam najprostsze podstawy ;d

dzienki za pomoc ;p

Comments

Na przyszłość proszę wstawiać kod w odpowiednie bloczki.

---

spox ziom

---

@sli­der.ugu.pl, a po co ta zmienna numerm w ogóle?

---

po to zeby wskazywala numer slajdu dla przycisku poprzedni,

numer jest dla nastepny

tak przekombinowane troche ;p

---

Może wystarczy bieżący i obliczać poprzedni i następny?

---

czk sprubuje ;p

---

a jak te obliczanie zrobic kurde bo nwm w choj

---

Już obliczasz w funkcji fwd. W funkcji prev odejmowanie i sprawdzanie, czy koniec zakresu.

---

thx

---

@slider.ugu.pl, proszę zachować kulturę i nie obrażać użytkowników forum.

Answer 1

Do wskazania bezpośrednio slajdu (przyciski 1, 2, 3 ... itd.) użyj jednej funkcji, to samo do "obsługi" przycisków, Poprzedni i Następny.

 

przykład

<div id="sliderek"></div>

<div class="buttons"> 
  <button type="button" onclick="show(-1)">Poprzedni</button> 
  <button type="button" onclick="showIndicated(1)">1</button> 
  <button type="button" onclick="showIndicated(2)">2</button> 
  <button type="button" onclick="showIndicated(3)">3</button> 
  <button type="button" onclick="showIndicated(4)">4</button> 
  <button type="button" onclick="showIndicated(5)">5</button> 
  <button type="button" onclick="showIndicated(6)">6</button> 
  <button type="button" onclick="showIndicated(7)">7</button> 
  <button type="button" onclick="show(1)">Następny</button>
</div>

#sliderek
{
  /* background-image: url("img/1.png"); */
  background-image: url("https://picsum.photos/500/500/?random=1");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid;
  width: 600px;
  height: 400px;
  margin: 0.5em auto;  
}
.buttons {
  display: flex;
  justify-content: center;  
}
.buttons button {
  margin: 0 0.25em;
}

const MAX_SLIDE_LENGHT = 7;
let current_slide = 1;

function show(number) 
{
  current_slide += number;
  if (current_slide > MAX_SLIDE_LENGHT) 
    current_slide = 1;
  else if (current_slide < 1)
    current_slide = MAX_SLIDE_LENGHT;

  const element = document.getElementById("sliderek"); 
  //element.style.backgroundImage = "url('img/" + current_slide + ".png')";
  element.style.backgroundImage = "url('https://picsum.photos/500/500/?random=" + current_slide + "')";

  console.clear();
  console.log("Slajd numer: ", current_slide);
}

function showIndicated(img_number) 
{
  const element = document.getElementById("sliderek");
  current_slide = img_number;
  //element.style.backgroundImage = "url('img/" + img_number + ".png')";
  element.style.backgroundImage = "url('https://picsum.photos/500/500/?random=" + img_number + "')";
}