Forum PHP.pl > Slideshow z wieloma funkcjami *tylko JS*

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Slideshow z wieloma funkcjami *tylko JS*

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

karamelek

10.08.2015, 16:16:10

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 
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>Motyle</title>
   </head>
   <body onload="sliderAuto()">
      <section class="containerSlider">
         <div id="okazy">
            <img src="media/slideshow/expo-1.jpg" id="slide" width="100%"></img>
            <div id="nameExponat">
               <p id="okazPodpis">Podpis eksponatu</p>
            </div>
            <form action="#" id="buttonNavi">
               <button type="button" onClick="slider(-1)" id="wstecz">&lt;&lt;</button>
               <button type="button" onClick="slider(1)" id="dalej">>></button>
            </form>
         </div>
      </section>
   </body>
</html>
[HTML] pobierz, plaintext

i JS

[HTML] pobierz, plaintext 
var licznik;
var wszyZdj;
licznik = 1;
wszyZdj = 4;
 
var captionText = new Array(
   "Podpis1",
   "Podpis2",
   "Podpis3",
   "Podpis4"
)
 
window.setInterval(fuonction sliderAuto( x ){
    var image = document.getElementById('slide');
    licznik = licznik + 1; 
   if(licznik > 4){ licznik = 1;}
   if(licznik < 1){ licznik = 4;}
   image.src="media/slideshow/expo-"+ licznik +".jpg";
   document.getElementById("okazPodpis").innerHTML = captionText[licznik];
 },3000);
 
function slider( x ){
    var image = document.getElementById('slide');
    licznik = licznik + x; 
   if(licznik > 4){ licznik = 1;}
   if(licznik < 1){ licznik = 4;}
   image.src="media/slideshow/expo-"+ licznik +".jpg"
   buttons();
 }
 
function buttons() {
   document.getElementById('dalej').disabled = licznik >= wszyZdj;
   document.getElementById("wstecz").disabled = licznik <= wszyZdj;
}
[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

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

Pozdrawiam
Karamelek

Comandeer

10.08.2015, 16:55:10

Cytat

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

Jasne, że się da

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);

karamelek

10.08.2015, 17:27:08

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

Comandeer

10.08.2015, 17:32:30

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.

karamelek

10.08.2015, 18:14:34

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)

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.