Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Slideshow z wieloma funkcjami *tylko JS*
karamelek
post
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 (IMG:style_emoticons/default/smile.gif)

Będę bardzo wdzięczna za odpowiedzi, rozwiązania i porady (IMG:style_emoticons/default/smile.gif)

Pozdrawiam
Karamelek
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
karamelek
post
Post #2





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) (IMG:style_emoticons/default/oneeyedsmiley02.png)
Go to the top of the page
+Quote Post

Posty w temacie
- karamelek   Slideshow z wieloma funkcjami *tylko JS*   10.08.2015, 16:16:10
- - Comandeer   CytatDa się zrobić coś takiego przy pomocy tylko J...   10.08.2015, 16:55:10
- - karamelek   Z racji tego, ze nie bedzie wiecej niz 6 slajdow i...   10.08.2015, 17:27:08
- - Comandeer   Jest pewna różnica między "nie więcej niż 6...   10.08.2015, 17:32:30
- - karamelek   Rozumiem. Pobawie sie tym i dam znac, chyba, ze ma...   10.08.2015, 18:14:34

« Następny starszy · JavaScript · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 12.10.2025 - 12:59
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn