Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Slideshow z wieloma funkcjami *tylko JS*
karamelek
post 10.08.2015, 16:16:10
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 10.08.2015

Ostrzeżenie: (0%)
-----

Hej,
przychodzę do Was z moim problemem. Otóż mam jako zadanie domowe napisać (bez użycia gotowych rozwiązań, Lightboxów, JQuery i bibliotek JS z Internetu) Slider, Slideshow zdjęć okazów motyli do mojej strony internetowej. Jest w sieci sporo rozwiązań ale żadno nie do końca odpowiada temu, co jest wymagane i zwykle ma jakiś plugin lub działa dzięki pomocy w.w. dodatków.
Sama coś napisałam, jednak jeszcze nie do końca działa to jak powinno.

Otóż ten Slider:
- powinien prezentować zdjęcia okazów z odpowiadającym podpisem
- powinien przy odswieżeniu lub pierwszym wejściu powinien wyświetlić się przypadkowo wylosowany okaz (tego jeszcze nie mam – tu zapewne trzeba pracować z Math.random)
- powinien zawierać przycisk do sterowania – dalej i wstecz
- powinien mieć wyłączony przycisk dalej przy zdjęciu ostatnim oraz wyłączony przycisk wstecz przy pierwszym (prawie działa, chociaż w moim Sliderze tak jakby nie było końca i po ostatnim zdjęciu pokazuje się pierwsze a powinno się zatrzymać)
- powinien „lecieć” dalej ze slajdami, jeśli użytkownik nie użyje żadnego z dwóch przycisków przez 3 sekundy (takie automatyczne przewracanie slajdów). Jeśli zaś użyje przycisku – logicznie automatyczne przełączanie powinno być zdeaktywowane.


Da się zrobić coś takiego przy pomocy tylko JS i HTML , bez żadnych dodatków?

Mój kod prezentuje się tak:

HTML
[HTML] pobierz, plaintext 
  1. <html>
  2.    <head>
  3.       <meta charset="UTF-8">
  4.       <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  5.       <title>Motyle</title>
  6.    </head>
  7.    <body onload="sliderAuto()">
  8.       <section class="containerSlider">
  9.          <div id="okazy">
  10.             <img src="media/slideshow/expo-1.jpg" id="slide" width="100%"></img>
  11.             <div id="nameExponat">
  12.                <p id="okazPodpis">Podpis eksponatu</p>
  13.             </div>
  14.             <form action="#" id="buttonNavi">
  15.                <button type="button" onClick="slider(-1)" id="wstecz">&lt;&lt;</button>
  16.                <button type="button" onClick="slider(1)" id="dalej">>></button>
  17.             </form>
  18.          </div>
  19.       </section>
  20.    </body>
  21. </html>
[HTML] pobierz, plaintext


i JS
[HTML] pobierz, plaintext 
  1. var licznik;
  2. var wszyZdj;
  3. licznik = 1;
  4. wszyZdj = 4;
  5.  
  6. var captionText = new Array(
  7.    "Podpis1",
  8.    "Podpis2",
  9.    "Podpis3",
  10.    "Podpis4"
  11. )
  12.  
  13. window.setInterval(fuonction sliderAuto( x ){
  14.     var image = document.getElementById('slide');
  15.     licznik = licznik + 1; 
  16.    if(licznik > 4){ licznik = 1;}
  17.    if(licznik < 1){ licznik = 4;}
  18.    image.src="media/slideshow/expo-"+ licznik +".jpg";
  19.    document.getElementById("okazPodpis").innerHTML = captionText[licznik];
  20.  },3000);
  21.  
  22. function slider( x ){
  23.     var image = document.getElementById('slide');
  24.     licznik = licznik + x; 
  25.    if(licznik > 4){ licznik = 1;}
  26.    if(licznik < 1){ licznik = 4;}
  27.    image.src="media/slideshow/expo-"+ licznik +".jpg"
  28.    buttons();
  29.  }
  30.  
  31. function buttons() {
  32.    document.getElementById('dalej').disabled = licznik >= wszyZdj;
  33.    document.getElementById("wstecz").disabled = licznik <= wszyZdj;
  34. }
[HTML] pobierz, plaintext


Nie wiem czy jest prawidłowy w samym pomyśle, ale jeśli trzeba zacząć na nowo zupełnie inaczej to zrobię tak smile.gif

Będę bardzo wdzięczna za odpowiedzi, rozwiązania i porady smile.gif

Pozdrawiam
Karamelek
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
Comandeer
post 10.08.2015, 16:55:10
Post #2





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Cytat
Da się zrobić coś takiego przy pomocy tylko JS i HTML , bez żadnych dodatków?

Jasne, że się da wink.gif

Zacznijmy od tego, że podszedłbym do problemu nieco inaczej. Umieściłbym w kodzie HTML elementy dla każdego slajdu (czyli obrazek + podpis) - najlepiej w liście. Następnie przy wczytaniu strony ukryłbym wszystkie elementy listy i pokazał losowy (losowanie można zrobić przy pomocy: http://javascript.pl/articles/losowa-liczb...go-zakresu.html - zakres to od 0 do tablicaElementow.length - 1).

Blokowanie przycisków prosto zrobić na liczniku (w gruncie rzeczy masz to). Natomiast zmianę slajdów zrobiłbym na rekurencyjnym setTimeout (jakoś tak mi się to wydaje bardziej do kontrolowania). Oczywiście musisz se zapisać timer id do zmiennej, żeby go przerwać:
Kod
var timerId = setTimeout(function() {}, 1000);

//i jak ktoś pacnie button to:
clearTimeout(timerId);


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
karamelek
post 10.08.2015, 17:27:08
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 10.08.2015

Ostrzeżenie: (0%)
-----

Z racji tego, ze nie bedzie wiecej niz 6 slajdow i tak, lepiej bedzie chyba mi od razu uzyc

Kod
Math.floor(Math.random() * 6) + 1

tylko jak to wszystko do kupy zlozyc czarodziej.gif
Go to the top of the page
+Quote Post
Comandeer
post 10.08.2015, 17:32:30
Post #4





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Jest pewna różnica między "nie więcej niż 6" oraz "dokładnie 6" - takie losowanie będzie działać tylko i wyłącznie w drugim przypadku.


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
karamelek
post 10.08.2015, 18:14:34
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 10.08.2015

Ostrzeżenie: (0%)
-----

Rozumiem. Pobawie sie tym i dam znac, chyba, ze masz jeszcze jakies pomysly. Moglabym wyslac caly kod (jest troche wiecej tego) ale na priv, bo nie chce dawac rozwiazan tak publicznie (ach te zadania szkolne) oneeyedsmiley02.png
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 06:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn