Wskaźnik slajdu

Question

Hej,

zrobiłem slider na swojej stronie, w oparciu o drugi odcinek pana Mirosława z JavaScript. Chcę aby pod sliderem były kropeczki (tak jak na filmie), które będą zmieniać swój kolor. Na przykład pojawia się zdjęcie numer 2 to kropka numer 2 zmienia kolor. Próbowałem na różne sposoby ale nie działało i samemu jak wymyślałem to też nie działało:(.

Html:

<div id="slider"></div>
          <span onclick="ustawslajd(1)" id="circle-button">1</span>
          <span onclick="ustawslajd(2)" id="circle-button">2</span>
          <span onclick="ustawslajd(3)" id="circle-button">3</span>
          <span onclick="ustawslajd(4)" id="circle-button">4</span>

Js:

var numer = 1;
var timer1 = 0;
var timer2 = 0;
var dots = document.getElementById("circle-button")


function ustawslajd(nrslajdu)
{
  clearTimeout(timer1);
  clearTimeout(timer2);
  numer = nrslajdu - 1;

  schowaj();
  setTimeout("zmienslajd()", 500);
}

function schowaj()
{
  $("#slider").fadeOut(500);
}

function zmienslajd()
{
  numer++;
  if(numer > 4)
  {
    numer = 1;
  }

  var plik = "<img src=\"images/sowa" + numer + ".png\" alt=\"sowa\">";

  document.getElementById("slider").innerHTML = plik;
  $("#slider").fadeIn(500);

  timer1 = setTimeout("zmienslajd()", 5000);
  timer2 = setTimeout("schowaj()", 4500);
}

 

Answer 1

Mozesz sobie zapisac w tablicy obiekty zawierające src obrazka i kolor kropki i na tej podatawiw uatawiac to w funkcji zmienSlajd.

Comments

Dzięki za odpowiedź,                                                                                                   

Jeszcze chwilę pomyślałem i znalazłem rozwiązanie:                                                       

Do funkcji zmienslaj() dodajemy:

  if(numer == 1)
 {
  document.getElementById("circle-button1").style.color = "#555555";
  document.getElementById("circle-button1").style.backgroundColor = "#555555";
 }
 else
 {
  document.getElementById("circle-button1").style.color = "#AAAAAA";
  document.getElementById("circle-button1").style.backgroundColor = "#AAAAAA";
 }
 
 
 if(numer == 2)
 {
  document.getElementById("circle-button2").style.color = "#555555";
  document.getElementById("circle-button2").style.backgroundColor = "#555555";
 }
 else
 {
  document.getElementById("circle-button2").style.color = "#AAAAAA";
  document.getElementById("circle-button2").style.backgroundColor = "#AAAAAA";
 }
 
 
 if(numer == 3)
 {
  document.getElementById("circle-button3").style.color = "#555555";
  document.getElementById("circle-button3").style.backgroundColor = "#555555";
 }
 else
 {
  document.getElementById("circle-button3").style.color = "#AAAAAA";
  document.getElementById("circle-button3").style.backgroundColor = "#AAAAAA";
 }


 if(numer == 4)
 {
  document.getElementById("circle-button4").style.color = "#555555";
  document.getElementById("circle-button4").style.backgroundColor = "#555555";
 }
 else
 {
  document.getElementById("circle-button4").style.color = "#AAAAAA";
  document.getElementById("circle-button4").style.backgroundColor = "#AAAAAA";
 }