Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Przycisk do galerii
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
darksiders94
25.06.2014, 17:08:07
Ktoś mi powie dlaczego takie coś nie działa poprawnie?
Wciskam przycisk wstecz i działa tylko pierwszy element funkcji: czyli z indeksu 1 do 0. Reszta nie działa. Rzecz jasna chodzi o przycisk do galerii


function wstecz(){
if(indeks = 1){
indeks--;
}else if(indeks = 2){
indeks--;
}else if(indeks = 0){
indeks = 2;
}
}

window.onload = function(){


var buttonik = document.getElementById("przycisk_poprzedni");
przycisk_poprzedni.onclick = function(){
wstecz();
}

}
trueblue
25.06.2014, 17:27:02
A jak wygląda poprawny operator porównania?
darksiders94
25.06.2014, 17:28:14
kiedy zamiast = dam == to w ogóle nie działa

Mam wrazenie, że funkcje nie chcą mi wykonywać kilku rzeczy tylko wykonują jedną
trueblue
25.06.2014, 17:47:02
W jakim sensie kilku?
Ta funkcja przy jednym wywołaniu wykona maksymalnie jedną operację przypisania.
redeemer
25.06.2014, 17:49:17
Cytat(darksiders94 @ 25.06.2014, 18:28:14 ) *
kiedy zamiast = dam == to w ogóle nie działa
No i prawidłowo. Włącz konsole w przeglądarce to zobaczysz błędy (zmienna indeks jest w ogóle zainicjowana gdzieś?). Dodatkowo zamiast tak ifować ("zapętlając" licznik) możesz użyć np.:

[JAVASCRIPT] pobierz, plaintext 
  1. var count = 3; // 0,1,2
  2. var indeks = 1;
  3. indeks = (++indeks)%count; // nastepny w zakresie 0-2 z wykorzystaniem modulo 
  4. indeks = (--indeks<0 ? count-1 : indeks); // poprzedni w zakresie 0-2 z wykorzystaniem instrukcji warunkowej
[JAVASCRIPT] pobierz, plaintext
darksiders94
25.06.2014, 18:24:36
no bo tam mam pierwszą rzecz a potem jeszcze w else if. Te if else w ogóle nie działają.Może podam cały kod to bedzie wam łatwiej byka znaleźć




var zdjecia = new Array("obraz-slider1","obraz-slider2","obraz-slider3");

const FOTY = "zdjecia/";
const SEC = 1000;
const ZMIANA = 5*SEC;

indeks = 0;

function uaktualnij(){
var img = document.getElementsByTagName("img");
for(var i=0; i<img.length; i++){
img[i].src = FOTY + zdjecia[indeks] + ".jpg";
}

indeks++;
if(indeks==zdjecia.length)
indeks=0;

}

function startInterval(){
interval = setInterval(function(){ uaktualnij(); }, ZMIANA);
}

function stopInterval(){
clearInterval(interval);
}

function wstecz(){
if(indeks=1)
indeks=0;
}


window.onload = function(){
uaktualnij();
startInterval();

var but = document.getElementById("przycisk_stop");
var start = "Rozpocznij prezentację";
var stop = "Wstrzymaj prezentację";
przycisk_stop.value = stop;
przycisk_stop.onclick = function(){
if(this.value == stop){
stopInterval();
this.value = start;
}else{
startInterval();
this.value = stop;
}
}

var buttonik = document.getElementById("przycisk_poprzedni");
przycisk_poprzedni.onclick = function(){
wstecz();
}

}


@Redeemer Nie za bardzo wiem co napisałeś biggrin.gif dopiero zaczynam no i w związku z tym robię sobie galerię na dobry początek smile.gif
Funkcje i ifowanie jest dla mnie bardziej przejrzyste biggrin.gif
trueblue
25.06.2014, 19:25:19 
[HTML] pobierz, plaintext 
  1. //nie wiem po co tu pętla skoro masz jedno zdjęcie
  2. function uaktualnij(){
  3.  var img = document.getElementsByTagName("img");
  4.  img[0].src = FOTY + zdjecia[indeks] + ".jpg";
  5. }
  6.  
  7. function wstecz(){
  8.  indeks--;
  9.  if(indeks<0)
  10.   indeks=2;
  11. }
[HTML] pobierz, plaintext
darksiders94
26.06.2014, 14:40:45
to co podałeś nie działa. Mam 3 zdjecia ale jedno miejsce na nie.
trueblue
26.06.2014, 14:42:36
Pokaż cały kod.
darksiders94
26.06.2014, 15:20:06
HTML

<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="skrypty.js"></script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="container">
<!-- -----------------------------SEKCJA1---------------------------------- -->
<div id="sekcja1">
<div id="panel">
<div id="panel-telefon">
<b>KONTAKT: 500 450 846</b>
</div>
<div id="panel-email">
<b>E-mail: pawellos110@gmail.com</b>
</div>
</div>
<div id="baner">
<div id="fotos">
<img src=""/>
<input type="button" id="przycisk_stop" value="" />
<input type="button" id="przycisk_poprzedni" value="<<Prev" />
</div>
</div>
</div>
<!-- -----------------------------SEKCJA2---------------------------------- -->
<div id="sekcja2">
<div class="clear"></div>
<div id="menu">
<div id="klocek1-menu">
<div id="klocek1-text">
<b>Główna</b>
</div>
</div>
<div id="klocek2-menu">
<div id="klocek2-text">
<b>Szablony Allegro</b>
</div>
</div>
<div id="klocek3-menu">
<div id="klocek3-text">
<b>Strony internetowe</b>
</div>
</div>
<div id="klocek4-menu">
<div id="klocek4-text">
<b>Cennik<b>
</div>
</div>
<div id="klocek5-menu">
<div id="klocek5-text">
<b>O nas</b>
</div>
</div>
</div>
<div class="clear"></div>
<div id="nowe-standardy-css3">
<b>Nowe standardy CSS3 na Twojej stronie</b>
</div>
<div id="css3">
</div>
<div class="clear"></div>
<div id="html5">
</div>
<div id="nowe-standardy-html5">
<b>Najnowsze rozwiązania HTML5 w zasięgu ręki</b>
</div>
<div class="clear"></div>
</div>
<!-- -----------------------------SEKCJA3---------------------------------- -->
<div id="sekcja3">
<div id="stopka-autorska">
<div id="stopka-autorska-text">
<b>Szablon stworzony przez: pawellos110@gmail.com</b>
</div>
</div>
</div>
</div>
</body>
</html>





JS



var zdjecia = new Array("obraz-slider1","obraz-slider2","obraz-slider3");

const FOTY = "zdjecia/";
const SEC = 1000;
const ZMIANA = 5*SEC;

indeks = 0;

function uaktualnij(){
var img = document.getElementsByTagName("img");
for(var i=0; i<img.length; i++){
img[i].src = FOTY + zdjecia[indeks] + ".jpg";
}

indeks++;
if(indeks==zdjecia.length)
indeks=0;

}

function wstecz(){
indeks--;
if(indeks<0)
indeks=2;
}

function startInterval(){
interval = setInterval(function(){ uaktualnij(); }, ZMIANA);
}

function stopInterval(){
clearInterval(interval);
}

window.onload = function(){
uaktualnij();
startInterval();

var but = document.getElementById("przycisk_stop");
var start = "Rozpocznij prezentację";
var stop = "Wstrzymaj prezentację";
przycisk_stop.value = stop;
przycisk_stop.onclick = function(){
if(this.value == stop){
stopInterval();
this.value = start;
}else{
startInterval();
this.value = stop;
}
}

var buttonik = document.getElementById("przycisk_poprzedni");
przycisk_poprzedni.onclick = function(){
wstecz();
}

}
trueblue
26.06.2014, 15:36:44
Nie wiem dlaczego nadal pchasz pętlę:
[HTML] pobierz, plaintext 
  1. for(var i=0; i<img.length; i++){
  2. img[i].src = FOTY + zdjecia[indeks] + ".jpg";
  3. }
[HTML] pobierz, plaintext

skoro masz jeden obrazek. Ale jeśli chcesz, to może zostać.

Skrypt działa poprawnie, tzn. brak błędów wykonania.
Przycisk "wstecz" tak oprogramowany również działa poprawnie - cofa indeks o 1, przez co kolejnym wyświetlanym slajdem jest "aktualny_indeks+1". Bardzo możliwe, że chciałeś inne działanie, ale jak na razie nie opisałeś.
darksiders94
26.06.2014, 16:00:16
hmm.. no ale mi to nie działa. Nie mam pojęcia dlaczego. Może to przez timer? Zdjęcia są wyświetlane po kolei i przycisk nie działa.
trueblue
26.06.2014, 16:39:22
A jak ma działać przycisk?
Obecnie kiedy jest wyświetlane zdjęcie numer 3, po kliknięciu dwukrotnym indeks jest cofany do wartości 0, i jako kolejny wyświetli się slajd numer 2.
darksiders94
26.06.2014, 17:23:38
Dlaczego po kliknięciu dwukrotnym?
Poza tym tak się właśnie nie dzieje. Pokaz leci sobie dalej i ten przycisk nic nie robi. Chcialbym żeby po kliknięciu przycisku natychmiat pojawiało się zdjecie wcześniejsze.

Dobra, działa. Tylko nie wiem dlaczego po dwukrotnym kliknięciu dopiero.
Nie wiem jak zrobić żeby od razu zdjęcia przeskakiwały. Dodaje do funkcji wstecz stopinterval a na koniec startinterval i nie reaguje tak jak powinno

No i jeszcze nie rozumiem Twojego zapisu w funkcji wstecz.
Jeśli dobrze rozumuję to zdjęcie 1 to indeks 0, zdjecie 2 to indeks 1, zdjęcie 3 to indeks 2.
Więc dlaczego w funkcji jest jeśli indeks < 0. Kiedy indeks jest mniejszy od 0?
Co najlepsze to działa.. chciałbym zrozumieć jak..
trueblue
26.06.2014, 17:36:22
Bo kliknąłem dwukrotnie.

Teraz dopiero opisałeś problem.

[HTML] pobierz, plaintext 
  1. var zdjecia = new Array("1","2","3");
  2.  
  3. const FOTY = "";
  4. const SEC = 1000;
  5. const ZMIANA = 5*SEC;
  6.  
  7. var indeks = 0;
  8. var interval;
  9.  
  10. function uaktualnij(){
  11. var img = document.getElementsByTagName("img");
  12. img[0].src = FOTY + zdjecia[indeks] + ".jpg";
  13. indeks++;
  14. if(indeks==zdjecia.length)
  15.  indeks=0;
  16.  
  17. }
  18.  
  19. function wstecz(){
  20. stopInterval();
  21. indeks-=2; //cofamy się o dwa, bo aktualny indeks wskazuje na zdjęcie następne w kolejce, a nie aktualnie wyświetlane
  22. if(indeks<0)
  23. 	indeks=2;
  24.  
  25. uaktualnij();
  26. startInterval();
  27.  
  28. }
  29.  
  30. function startInterval(){
  31. interval = setInterval(function(){ uaktualnij(); }, ZMIANA);
  32. }
  33.  
  34. function stopInterval(){
  35. clearInterval(interval);
  36. interval=null;
  37. }
  38.  
  39. window.onload = function(){	
  40. startInterval(); 
  41.  
  42. var but = document.getElementById("przycisk_stop");
  43. var start = "Rozpocznij prezentację";
  44. var stop = "Wstrzymaj prezentację";
  45. przycisk_stop.value = stop;
  46. przycisk_stop.onclick = function(){
  47. if(this.value == stop){
  48. stopInterval();
  49. this.value = start;
  50. }else{
  51. startInterval();
  52. this.value = stop;
  53. }
  54. }
  55.  
  56. var buttonik = document.getElementById("przycisk_poprzedni");
  57. przycisk_poprzedni.onclick = function(){
  58. wstecz();
  59. }
  60.  
  61. }
[HTML] pobierz, plaintext
darksiders94
26.06.2014, 18:16:18
Wszystko śmiga jak należy oprócz tego, że funkcja wstecz przestaje działać prawidłowo kiedy jest wyświetlane zdjęcie 3. Wtedy zamiast cofnąć do zdjęcia numer 2, wyświetla zdjęcie następne czyli pierwsze. Z kolei kiedy z pierwszego przejdę do ostatniego to z ostatniego nie chce przełączyć do drugiego.

Tak czy siak jest lepiej biggrin.gif ba! nawet rozumiem wszystko co napisałeś smile.gif dziękuję za pomoc

Nawet wiem dlaczego się tak dzieje biggrin.gif nie wiedziałem wcześniej jaki wskazuje indeks. Dopiero Ty mi powiedziałeś, że wskazuje następny. To zupełnie inna sprawa teraz biggrin.gif
trueblue
26.06.2014, 18:34:11 
[HTML] pobierz, plaintext 
  1. var zdjecia = new Array("1","2","3");
  2.  
  3. const FOTY = "";
  4. const SEC = 1000;
  5. const ZMIANA = 5*SEC;
  6.  
  7. var indeks = -1;
  8. var interval;
  9. var direction=1;
  10.  
  11. function uaktualnij(){
  12.  
  13. indeks+=direction;
  14.  
  15. if(indeks==zdjecia.length)
  16.  indeks=0;
  17. if(indeks<0)
  18. 	indeks=zdjecia.length-1;
  19. var img = document.getElementsByTagName("img");
  20. img[0].src = FOTY + zdjecia[indeks] + ".jpg";
  21. }
  22.  
  23. function wstecz(){
  24. stopInterval();
  25. direction=-1;
  26. uaktualnij();
  27. direction=1;
  28. startInterval();
  29. }
  30.  
  31. function startInterval(){
  32. interval = setInterval(function(){ uaktualnij(); }, ZMIANA);
  33. }
  34.  
  35. function stopInterval(){
  36. clearInterval(interval);
  37. interval=null;
  38. }
  39.  
  40. window.onload = function(){	
  41. startInterval(); 
  42.  
  43. var but = document.getElementById("przycisk_stop");
  44. var start = "Rozpocznij prezentację";
  45. var stop = "Wstrzymaj prezentację";
  46. przycisk_stop.value = stop;
  47. przycisk_stop.onclick = function(){
  48. if(this.value == stop){
  49. stopInterval();
  50. this.value = start;
  51. }else{
  52. startInterval();
  53. this.value = stop;
  54. }
  55. }
  56.  
  57. var buttonik = document.getElementById("przycisk_poprzedni");
  58. przycisk_poprzedni.onclick = function(){
  59. wstecz();
  60. }
  61.  
  62. }
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.