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

Wykonywanie dwóch (sliderów) skryptów JS jednocześnie

VPS Starter Arubacloud
0 głosów
129 wizyt
pytanie zadane 27 sierpnia 2017 w JavaScript przez web-tom Nowicjusz (160 p.)
Witam, chciałbym podrzucić temat, który wydawało by się był już obecny na forum, chociaż nie wiem czy to to samo.  A mianowicie chodzi o działanie jednoczesne np. dwóch (bo może być ich więcej) skryptów JS dla dwóch sliderów na stronie. Według wszelkich informacji z jakimi udało mi się zapoznać (fora, samouczki, itp, itd..), skrypt w JS realizowany jest linia po linii. OK, ale ... jeśli stronę podzielę na pół (np pionową krechą) i po lewej stronie umieszczę slidera z 5 obrazkami, a po prawej stronie z np 6 obrazkami, to wykonywane jest to w ten sposób, że najpierw dziala slider "lewy" a po wyczerpaniu czasu na ostatni obrazek, zdjęcia wygasają i pojawia się slider "prawy" i tu podobnie, wyczerpie się czas na ostatni obrazek prawego slidera to slider ten znika i pojawia się slider lewy, i tak dalej... Niby działa a jednak nie działa. Nie ukrywam, że są to moje początki w JS, ale nie wiem czy nie wziąłem sobie zbyt cieżkiego tematu na głowę ? Skąd inąd otrzymałem też odpowiedź, że "tego się nie da zrobić" ale wydaje mi się, że "nie da się" to chyba zbytnio przesadzone. Czy ktoś już walczył z czymś takim ?

3 odpowiedzi

0 głosów
odpowiedź 27 sierpnia 2017 przez cyklop123 Bywalec (2,790 p.)
Pokaż kod i objaśnij bliżej co chcesz osiągnąć.
0 głosów
odpowiedź 27 sierpnia 2017 przez Ehlert Ekspert (212,630 p.)

Po pierwsze Js działa asynchronicznie więc 20 sliderów z małymi wymiarami może spokojnie zasuwać na jednej stronie. Po drugie kod pojedynczych komponentów powinien być odseparowany do jakiegoś jednego obiektu globalnego lub jego namespace'a. Przynajmniej powinien znajdować się w IIFE, wtedy masz pewność że nie będzie problemów z kolizją nazw zmiennych (o ile nie uciekł Ci gdzieś var cheeky).

0 głosów
odpowiedź 16 września 2017 przez web-tom Nowicjusz (160 p.)

Walczyłem z tym najpierw sam, potem uderzyłem do znajomków, którzy wydawalo mi sie, że się na tym znają, ale kicha. Odpowiedź jednego rodzaju, albo daj sobie spokój, albo po co ci dwa slidery na stronie, itp... itd... Niestety takie odpowiedzi mnie nie zadawalają i walczę dalej, ale jakoś chyba mizernie, bo albo wyswietlają się co drugi obrazek w jednym sliderze, albo nie zmieniają się, itp.. Co do samych .jpg to mają 300x260 i waga każdego około 20k. Wizję mam taką, żeby na stronie przewijały się dwa może trzy slidery, z obrazkami np. grupa 1 to kwiaty, grupa 2 to drzewa, ktoś kto wchodzi na stronę wystarczy, że popatrzy kilka sekund i widzi że interesujący go obiekt jest w grupie 1 i naciska tego slidera i przechodzi do podstrony z tymi kwiatami, nasionami kwiatów, itd.. Dla drzew to samo. <a href>  odnosi się do całego slidera, więc nie ma konieczności przypisywania go do pojedynczych zdjęć. Może ktoś coś pomoże w tej kwestii, z góry podziękował.

Kod poniżej

 <!-- GRUPA1 -->
   
      <td width="50%" height="260">
      <p align="center">
     
   <!DOCTYPE html>
   <html>
   <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
   
   * {box-sizing:border-box}
   body {font-family: Verdana,sans-serif;}
   .mySlides {display:none}
   
   /* Slideshow container */
   .slideshow-container1 {
   max-width: 300px;
   position: relative;
   margin: auto;
   }
   
   /* The dots/bullets/indicators */
   .dot {
   height: 13px;
   width: 13px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
   }
   
   .active {
   background-color: #717171;
   }
   
   /* Fading animation */
   .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1s;
   animation-name: fade;
   animation-duration: 1s;
   }
   
   @-webkit-keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
   }
   
   @keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
   }
   
   </style>
   </head>
   <body>
   
   <div class="slideshow-container1">
   
   <div class="mySlides1 fade">
   <img src="gr1/rys1.jpg" style="width:300; height:260" img border="1">
   </div>
   
   <div class="mySlides1 fade">
   <img src="gr1/rys2.jpg" style="width:300; height:260" img border="1">
   </div>
   
   <div class="mySlides1 fade">
   <img src="gr1/rys3.jpg" style="width:300; height:260" img border="1">
   </div>
   
   <div class="mySlides1 fade">
   <img src="gr1/rys4.jpg" style="width:300; height:260" img border="1">
   </div>
   
   <div class="mySlides1 fade">
   <img src="gr1/rys5.jpg" style="width:300; height:260" img border="1">
   </div>
   
   </div>
   <br>
   
   <div style="text-align:center">
   <span class="dot"></span>
   <span class="dot"></span>
   <span class="dot"></span>
   <span class="dot"></span>
   <span class="dot"></span>
   </div>
   
   
   <script>
   var slideIndex = 0;
   showSlides();
   
   function showSlides() {
   var i;
   var slides = document.getElementsByClassName("mySlides1");
   var dots = document.getElementsByClassName("dot");
   for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none";
   }
   slideIndex++;
   if (slideIndex> slides.length) {slideIndex = 1}
   for (i = 0; i < dots.length; i++) {
   dots[i].className = dots[i].className.replace(" active", "");
   }
   slides[slideIndex-1].style.display = "block";
   dots[slideIndex-1].className += " active";
   setTimeout(showSlides, 2000);
   }
   </script>
   
   </body>
   </html>
    
   
   <!-- GRUPA2 -->
   
   <td width="50%" height="260">
       <p align="center">
   
   
   <!DOCTYPE html>
   <html>
   <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
   
   * {box-sizing:border-box}
   body {font-family: Verdana,sans-serif;}
   .mySlides {display:none}
   
   /* Slideshow container */
   .slideshow-container2 {
   max-width: 300px;
   position: relative;
   margin: auto;
   }
   
   /* The dots/bullets/indicators */
   .dot {
   height: 13px;
   width: 13px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
   }
   
   .active {
   background-color: #717171;
   }
   
   /* Fading animation */
   .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1s;
   animation-name: fade;
   animation-duration: 1s;
   }
   
   @-webkit-keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
   }
   
   @keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
   }
   
   </style>
   </head>
   <body>
   
   <div class="slideshow-container2">
   
   <div class="mySlides2 fade">
   <img src="gr2/rys1a.jpg" style="width:300; height:260" img border="1">
   </div>
   
   <div class="mySlides2 fade">
   <img src="gr2/rys2a.jpg" style="width:300; height:260" img border="1">
   </div>
   
   <div class="mySlides2 fade">
   <img src="gr2/rys3a.jpg" style="width:300; height:260" img border="1">
   </div>
   
   <div class="mySlides2 fade">
   <img src="gr2/rys4a.jpg" style="width:300; height:260" img border="1">
   </div>
   
   <div class="mySlides2 fade">
   <img src="gr2/rys5a.jpg" style="width:300; height:260" img border="1">
   </div>
   
   
   </div>
   <br>
   
   <div style="text-align:center">
   <span class="dot"></span>
   <span class="dot"></span>
   <span class="dot"></span>
   <span class="dot"></span>
   <span class="dot"></span>
   </div>
   
   
   <script>
   var slideIndex = 0;
   showSlides();
   
   function showSlides() {
   var i;
   var slides = document.getElementsByClassName("mySlides2");
   var dots = document.getElementsByClassName("dot");
   for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none";
   }
   slideIndex++;
   if (slideIndex> slides.length) {slideIndex = 1}
   for (i = 0; i < dots.length; i++) {
   dots[i].className = dots[i].className.replace(" active", "");
   }
   slides[slideIndex-1].style.display = "block";
   dots[slideIndex-1].className += " active";
   setTimeout(showSlides, 2000);
   }
   </script>
   
   
   </body>
   </html>
 

 

Podobne pytania

0 głosów
3 odpowiedzi 275 wizyt
pytanie zadane 14 lipca 2016 w JavaScript przez Tomo231 Początkujący (320 p.)
0 głosów
2 odpowiedzi 280 wizyt
pytanie zadane 3 lutego 2017 w JavaScript przez Andrzej Czarny Użytkownik (720 p.)
+2 głosów
2 odpowiedzi 230 wizyt
pytanie zadane 9 grudnia 2020 w PHP przez TeslaX93 Gaduła (3,590 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...