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

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: 15.09.2025 - 16:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn