• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Slajder js problem

0 głosów
63 wizyt
pytanie zadane 11 kwietnia 2017 w JavaScript, jQuery, AJAX przez shslr Obywatel (1,310 p.)

Oops niestety zalozylem nowy temat przez przypadek a chcialem tylko odpowiedziec w poprzednim.

Wielkie dzieki za odpowiedz, sporo mi pomogles. Ale jest jeszcze jeden problem, teraz przyciski dzialaja i w konsoli obrazki sie zmieniaja, ale tylko jako tekst w konsoli. Na stronie jest ciagle ten sam obrazek. Moze moglbys jeszcze na to spojrzec? Bardzo dziekuje za pomoc. 

 

var leftA = document.querySelector("#leftA");
console.log(leftA);
var rightA = document.querySelector("#rightA");
console.log(rightA);

var images = ["blackchair","orangechair","redchair"];
console.log(images);
var imageNumber = 0;
var imageLength = images.length -1;

function changeImage(x){
  imageNumber += x;
  if(imageNumber > imageLength){
    imageNumber = 0;
  }
  if (imageNumber < 0){
    imageNumber = imageLength;
  }
  document.querySelector(".blackchair").src = images[imageNumber];
  document.querySelector(".orange").src = images[imageNumber];
  document.querySelector(".red").src = images[imageNumber];
  console.log(images[imageNumber]);

}

leftA.addEventListener("click", function(){
    changeImage(-1);
});

rightA.addEventListener("click", function(){
    changeImage(1);
});

 

związane z odpowiedzią na: Prosty slajder JS - blad

1 odpowiedź

+1 głos
odpowiedź 12 kwietnia 2017 przez ShiroUmizake Nałogowiec (45,360 p.)

Bo jasno zaznaczyłeś typ danych - String.

var images = ["blackchair","orangechair","redchair"];

console.log(images)

Spróbuj z Image.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

Wyskoczy ci coś innego :).

No dobra wrzucasz mu Stringa, wywołuje się funkcja przeglądarka reaguje na zdarzenie... i co ma począć "blackchair"? Zapomniałeś mu podać typ Pilku (png,jpg,itd...).

 


 

 

 

komentarz 12 kwietnia 2017 przez shslr Obywatel (1,310 p.)

Dzieki za odpowiedz. Pierwszy raz robie slajder. Jest juz lepiej ale dalej mam jakis problem z tym. 

W html to powinno wygladac tak?

<section> 

    <div class="blackchair"> </div>
    <div class="orange"> </div>
    <div class="red"> </div>

</section>

Klasy maja ustawione obrazek jako background-image. 

Probowalem ustawic var images jako .png ale wtedy nie dziala. Na chwile obecna w konsoli obrazki sie zmieniaja ale na stronie nic sie nie dzieje. 

Kod JS: 

var leftA = document.querySelector("#leftA");
console.log(leftA);
var rightA = document.querySelector("#rightA");
console.log(rightA);

var blackchair = new Image(350,400);
blackchair.src = "../sit final/images/black_chair.png";
var orangechair = new Image(350,400);
orangechair.src = "../sit final/images/orange.png";
var redchair = new Image(350,400);
redchair.src = "../sit final/images/red_chair.png";

var images = [blackchair,orangechair,redchair];

var imageNumber = 0;
var imageLength = images.length -1;

function changeImage(x){
  imageNumber += x;
  if(imageNumber > imageLength){
    imageNumber = 0;
  }
  if (imageNumber < 0){
    imageNumber = imageLength;
  }
  document.querySelector(".blackchair").src = images[imageNumber];
  document.querySelector(".orange").src = images[imageNumber];
  document.querySelector(".red").src = images[imageNumber];
  console.log(images[imageNumber]);

}

leftA.addEventListener("click", function(){
    changeImage(-1);
});

rightA.addEventListener("click", function(){
    changeImage(1);
});

 

komentarz 12 kwietnia 2017 przez ShiroUmizake Nałogowiec (45,360 p.)

Zostaw jeden div.

 document.querySelector(".blackchair").src

Tym wywołujesz selektor, a nie klasę CSS . Do klasy CSS służy HTMLElement.style. i tu twoje style (ale rób to w ostateczności) lub lepsze HTMLElement.classList.

Po drugie Image jest obiektem! I jest parsowany jako DOM (dla potwierdzenia moich słów próbuj mu nadać id). Jeżeli chcesz to zrobić to musisz wstrzyknąć w HTML. (AppendChild). Dwa przechowuj je w jakieś tablicy.

Podobne pytania

0 głosów
1 odpowiedź 841 wizyt
pytanie zadane 27 września 2017 w JavaScript, jQuery, AJAX przez MCgabi Nowicjusz (160 p.)
0 głosów
1 odpowiedź 139 wizyt
pytanie zadane 24 kwietnia 2017 w JavaScript, jQuery, AJAX przez wazon Nowicjusz (200 p.)
+1 głos
1 odpowiedź 276 wizyt
pytanie zadane 8 października 2015 w JavaScript, jQuery, AJAX przez Magicone Nałogowiec (44,960 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

66,398 zapytań

113,152 odpowiedzi

239,540 komentarzy

46,660 pasjonatów

Przeglądających: 323
Pasjonatów: 15 Gości: 308

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...