Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Slide gallery
Forum PHP.pl > Forum > Przedszkole
-owen-
Witam!

Chciałbym napisać na stronę skrypt który umożliwiał by zmianę w jednym miejscu trzech zdjęć. Tak by pierwsze było zdjęcie numer 1, potem 2, 3 i znowu wracało do pierwszego. Zacząłem pisać skrypt, ale już na poczatku mam problemy. Może ktoś mi podpowie czy w dobrą stronę idę i może czego użyć aby dzialalo. Ja napisze z mojej strony jak to widze.

[JAVASCRIPT] pobierz, plaintext
  1. zdj = new Array("url(../images/slideGallery/1.jpg)",
  2. "url(../images/slideGallery/2.jpg)",
  3. "url(../images/slideGallery/3.jpg)");
  4. var licznik = 0;
  5. const SEK = 1000;
  6. const ZM = 5*SEC;
  7. interwal = 0;
  8.  
  9. function aa12() {
  10. var url = document.getElementById("c2");
  11. if(licznik < zdj.length){
  12. url.style.background = zdj[licznik];
  13. }else{
  14. licznik = 0;
  15. }
  16. }
  17.  
  18. function startInterwal() {
  19. interwal = setInterval(function(){aa12();}, ZMIANA);
  20. }
  21.  
  22. window.onload = startInterwal();
[JAVASCRIPT] pobierz, plaintext

Oczywiscie dany kod nie dziala, ale moze ktos mnie pokieruje co zmienic... Z gory dzieki
CuteOne
każde odpalenie aa12 powinno zwiększyć licznik o 1. Gdy ten przekroczy wielkość tablicy wraca do 0
bilskij
[JAVASCRIPT] pobierz, plaintext
  1. zdj = new Array("images/slideGallery/1.jpg",
  2. "images/slideGallery/2.jpg",
  3. "images/slideGallery/3.jpg");
  4. var licznik = 0;
  5. const SEK = 1000;
  6. const ZM = 5*SEC;
  7. interwal = 0;
  8.  
  9. function aa12() {
  10. var url = document.getElementById("c2");
  11. if(licznik < zdj.length){
  12. url.style.background = zdj[licznik];
  13. }else{
  14. licznik = 0;
  15. }
  16. licznik++;
  17. }
  18.  
  19. function startInterwal() {
  20. interwal = setInterval(function(){aa12();}, ZM);
  21. }
  22.  
  23. window.onload = startInterwal();
[JAVASCRIPT] pobierz, plaintext


Zmienilem tak ale nadal nie dziala
CuteOne
Ale co dokładnie nie działa? wywala błąd w konsoli błędów?
bilskij
W czym najlepiej sprawdzac bledy javyscript questionmark.gif Opera nic nie podpowiada o bledzi js
CuteOne
1.
[JAVASCRIPT] pobierz, plaintext
  1. function startInterwal() {
  2. setInterval("aa12()", ZM);
  3. }
[JAVASCRIPT] pobierz, plaintext


2. nie background tylko background-image
bilskij
Pozmienialem. Teraz na konsoli bledow zauwayzlem ze wyskakuje

url is not defined
url.style.backgroundImage = zdj[licznik];

[JAVASCRIPT] pobierz, plaintext
  1. zdj = new Array("images/slide-gallery/1.jpg", "images/slide-gallery/2.jpg", "images/slide-gallery/3.jpg");
  2. var licznik = 0;
  3. const SEK = 1000;
  4. const ZM = 5*SEK;
  5. var url = document.getElementById("c2");
  6.  
  7. function aa12() {
  8. if(licznik < zdj.length){
  9. url.style.backgroundImage = zdj[licznik];
  10. }
  11. else{
  12. licznik = 0;
  13. }
  14. }
  15.  
  16. function startInterwal() {
  17. setInterval(aa12(), ZM)
  18. }
  19.  
  20. window.onload = startInterwal();
[JAVASCRIPT] pobierz, plaintext
Rid
Niech Pan wklei:
var url = document.getElementById("c2");
zaraz na początku funkcji
function aa12()
albo niech zmieni nazwę zmiennej url na inną,bo nie wiem czy ta nazwa czasami nie jest zarezerwowana.
bilskij
Zmienilem nazwe na "urla" i teraz zmienilo sie że urla is null
Rid
Id c2 to button,textbox??
bilskij
ID c2 to div.

Pozniej jego style:

  1. #c2 {
  2. width: 377px;
  3. height: 258px;
  4. float: right;
  5. margin: 0 7px 0 0;
  6. padding: 0;
  7. }
Rid
urla.style.background = zdj[licznik];
zamienić na:
urla.style.background = 'url("'+zdj[licznik]+'")' ;
bilskij
Nic nie daje bo i tak urla jest nadal pusty sad.gif
Rid
Przekombinowałem trochę na pewno ma być tak:
urla.style.background = 'url('+zdj[licznik]+')' ;

W html ma pan prawidłow napisane:
  1. <div id="c2"></div>

I jeszcze jeden błąd ,zmienną pan nie ma zadeklarowaną ,prawidłowo:
  1. var zdj = new Array("images/slide-gallery/1.jpg", "images/slide-gallery/2.jpg", "images/slide-gallery/3.jpg");


Dużo błędów,ma pan niech pan przeanalizuje kod,jak się powinno stosować metody i funkcje.
Poprawić też należy:
  1. function startInterwal() {
  2. setInterval(aa12(), ZM)
  3. }

na
  1. function startInterwal() {
  2. setInterval("aa12()", ZM);
  3. }


Sugerowałbym ,także użycie firebuga i debugowanie.
bilskij
c2 nadal jest puste. Zmienia sie to dopiero w momencie gdy wrzuce

var urla = document.getElementById("c2");

do

window.onload
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.