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

Slider w JavaScript - potrzebne przyciski

0 głosów
207 wizyt
pytanie zadane 17 stycznia w JavaScript, jQuery, AJAX przez Luckyluck87 Użytkownik (560 p.)

Witam,

Poniżej zamieszczam skrypt Slidera w JavaScript. Potrzebuję dodać do niego przyciski "przód i tył" tak aby po kliknięciu następowała zmiana zdjęć. Będę bardzo wdzięczny za pomoc, pozdrawiam

  window.addEventListener('load', function() 
       {
         var image = document.getElementById("header");
         var backgrounds = ['url(img/image1.jpg)', 'url(img/image2.jpg)', 'url(img/image3.jpg)'];
         var time = 3;
         
         var i = 0;
         setInterval(function ()
       {
            i++;
            i%=backgrounds.length;
            
            image.style.backgroundImage = backgrounds[i];
         }, time * 1000);
      }, false); 

 

2 odpowiedzi

0 głosów
odpowiedź 17 stycznia przez ThePolishPPK Bywalec (2,000 p.)
edycja 17 stycznia przez ThePolishPPK

Wystarczy dodać dwa zanczniki, którym przypiszesz nasłuchiwanie onclick
 

<html>
  <body>
    <button id="previous" class="btn"><</button>
    <button id="next" class="btn">></button>
    <div id="header" style="width: 100%; height: 100vh;"></div>

  </body>
</html>
window.onload = function () {
var image = document.getElementById("header");
var backgrounds = ['url(img1.png)', 'url(img2.png)', 'url(img3.png)'];
var time = 10;

var i = 0;
function changeImg() {
	i %= backgrounds.length;
  image.style.backgroundImage = backgrounds[i];
}
setInterval(function () {
	i++;
  i %= backgrounds.length;
  changeImg();
}, time * 1000);
document.querySelector("#previous").onclick = function (){i=((i-1<0)? backgrounds.length-1 : i-1);changeImg();};
document.querySelector("#next").onclick = function (){i++;changeImg();};
};
body {
  padding: 0;
  margin: 0;
  width: 100%;
}

#header {
  background-size: 100% 100%;
}

.btn {
  position: absolute;
  color: white;
  font-size: 80px;
  top: 30%;
  background-color: rgba(255, 255, 255, 0.3);
  border: 0;
}

#previous {
  left: 0;
}

#next {
  right: 0;
}

 

komentarz 17 stycznia przez Luckyluck87 Użytkownik (560 p.)
Super, działa elegancko ;) No jeszcze próbuję zrobić tak żeby po kliknięciu w button, zerował się czas odliczania do zmiany zdjęcia. Pozdrawiam
komentarz 18 stycznia przez ThePolishPPK Bywalec (2,000 p.)
window.onload = function () {
var image = document.getElementById("header");
var backgrounds = ['url(img1.png)', 'url(img2.png)', 'url(img3.png)'];

var i = 0;
function changeImg() {
i %= backgrounds.length;
image.style.backgroundImage = backgrounds[i];
}

var autoSlide = function() {
  var interval;
  this.time = 3;
  this.slide = function () {
    i++;
    i %= backgrounds.length;
    changeImg();
   };
  this.start = function () {
    this.interval = setInterval(this.slide, this.time * 1000);
    console.log(this.time);
  };
  this.stop = function () {
    clearInterval(this.interval);
  };
  this.reset = function () {
    this.stop();
    this.start();
  };
}
 
  var a = new autoSlide();
  a.start();
  document.querySelector("#previous").onclick = function (){i=((i-1<0)? backgrounds.length-1 : i-1);changeImg(); a.reset();};
  document.querySelector("#next").onclick = function (){i++;changeImg(); a.reset();};
};

Możesz zrobić to z pomocą usunięcia setInterval i ponownego jego dodania

komentarz 23 stycznia przez Luckyluck87 Użytkownik (560 p.)
No właśnie próbowałem zrobić tak żeby usunąć i ponownie dodać setInterval ale ciągle coś nie grało , a teraz działa jak trzeba! Super :D

Dziękuję bardzo za pomoc :)

Pozdrawiam
0 głosów
odpowiedź 17 stycznia przez Tomek Sochacki Mędrzec (188,440 p.)

Odpowiedź na pytanie dostałeś z tego co widzę, więc ja tylko zostawię małe info tak dodatkowo, masz teraz taką tablicę:

['url(img/image1.jpg)', 'url(img/image2.jpg)', 'url(img/image3.jpg)']

staraj się unikać czegoś takiego. W tej chwili elementy te są praktycznie do wykorzystania tylko jako background-image. Lepiej byłby trzymać w tablicy same nazwy plików:

['image1.jpg', 'image2.jpg', 'image3.jpg']

i następnie najpierw przypisać sobie gdzieś path do zdjęć (tak aby latwo można to zmieniać):

const imagePath = 'img/';

i teraz używaj tych nazw plików np. tak:

image.style.backgroundImage = `url(${imagePath}${backgrounds[i]})`;

Dzięki temu będziesz mógł tą tablicę images wykorzystywać również w każdy inny sposób, są tam "czyste" elementy, same nazwy plików z rozszerzeniem i można je użyć np. w innym miejscu strony w atrybutach src dla <img> itp.

komentarz 17 stycznia przez Luckyluck87 Użytkownik (560 p.)
Super, dziękuję bardzo za odpowiedź oraz dobre wskazówki ;) Faktycznie lepiej będzie to zrobić w taki sposób. Popracuję nad tym jeszcze. Pozdrawiam

Podobne pytania

0 głosów
1 odpowiedź 76 wizyt
pytanie zadane 3 sierpnia w JavaScript, jQuery, AJAX przez cotyniepowiesz Nowicjusz (120 p.)
0 głosów
1 odpowiedź 175 wizyt
0 głosów
1 odpowiedź 302 wizyt
pytanie zadane 9 stycznia 2018 w JavaScript, jQuery, AJAX przez urbix01 Obywatel (1,330 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

66,324 zapytań

113,061 odpowiedzi

239,218 komentarzy

46,589 pasjonatów

Przeglądających: 257
Pasjonatów: 9 Gości: 248

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.

...