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

Slider w JavaScript - potrzebne przyciski

VPS Starter Arubacloud
0 głosów
469 wizyt
pytanie zadane 17 stycznia 2019 w JavaScript przez Luckyluck87 Użytkownik (660 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 2019 przez ThePolishPPK Bywalec (2,020 p.)
edycja 17 stycznia 2019 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 2019 przez Luckyluck87 Użytkownik (660 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 2019 przez ThePolishPPK Bywalec (2,020 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 2019 przez Luckyluck87 Użytkownik (660 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 2019 przez Tomek Sochacki Ekspert (227,510 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 2019 przez Luckyluck87 Użytkownik (660 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

+1 głos
1 odpowiedź 432 wizyt
0 głosów
1 odpowiedź 664 wizyt
pytanie zadane 3 sierpnia 2019 w JavaScript przez cotyniepowiesz Nowicjusz (120 p.)
0 głosów
1 odpowiedź 462 wizyt

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...