Nie działające przyciski w JS

Question

Ostatnio napisałem prosty slider w JS, niby wszystko śmiga, ale nie działają przyciski mające przenosić nas do odpowiednich slajdów, wiecie co jest nie tak? 
 

  <script type="text/javascript">
  ile=3;
  i=0;
        function ustawslajd(nrslajdu)
        {
            i = nrslajdu - 1;        
            
        }
        
        
  function galeria(){
    document.getElementById('obrazek').src= i + '.png';
    if(i<ile-1){
      i++
    }else{
      i=0
    }
    setTimeout('galeria()',5000)
  }
  window.onload=function(){
    for(x=0; x<ile; x++){
      new Image().src= x +".png" 
    }
    galeria()
  }
  </script>

 

A tu kod HTML

<span onclick="ustawslajd(1)" style="cursor:pointer;">[ 1 ]</span> 

<span onclick="ustawslajd(2)" style="cursor:pointer;">[ 2 ]</span> 

<span onclick="ustawslajd(3)" style="cursor:pointer;">[ 3 ]</span>

 

Comments

Twoje "przyciski" powinny być przyciskami, zamień span na button. Dorzucił bym również aria-label np.: aria-label="Slajd pierwszy"

Answer 1

Musisz dodać tylko jeszcze jedną linię w funkcji ustawslajd.

function ustawslajd(nrslajdu) {
          i = nrslajdu - 1;        
          var zz = document.getElementById('obrazek').src= i + '.png';
 }

Jeszcze jedna uwaga. Nie musisz nazywać swoich grafik tak jak teraz, czyli: 0.png, 1.png, itd...., tylko możesz zrobić tak:

<img id="obrazek"/>

var zz = document.getElementById('obrazek').src= 'rabbit' +  i + '.png';

I dzięki temu zabiegowi twoje grafiki mogą mieć nazwę rabbit0.png, rabbit1.png, itd....

Comments

Ach, no tak xD Głupi błąd, dzięki za pomoc!

---

O tym akurat wiedziałem, ale nie chciało mi się pisać dodatkowych linijek kodu :D

---

Jakich dodatkowych linijek kodu? Dopisujesz tylko w tych dwóch liniach przed i ==> 'rabbit'. Czyli będzie to tak:

'rabbit' + i + '.png'

Jeśli ktoś będzie mieć wyłączoną obsługę JS w przeglądarce, to dobrze by było nawet dodać tam obrazek, aby się wyświetlił, ale to zależy już od ciebie. Zamiast tamtego kodu html można dać taki:

<img src="rabbit0.png" id="obrazek"/>