HTML oraz XHTML

Jak dobrze zrobić pokaz slajdów w JS

Manna5

Wiem, że to jest dział HTML. Nie ma jednak działu dla JavaScriptu, ani nawet działu "Inne" (w Kompendium, na forum jest). Jako że JavaScript łączy się z HTML-em, umieściłem ten artykuł tutaj.

Jak dobrze zrobić pokaz slajdów w JS

Pokaz slajdów na stronie WWW to typowe zastosowanie JavaScriptu. Oczywistym rozwiązaniem jest podmiana obrazka, np. tak:

<HTML>
  <HEAD>
    <TITLE>Slideshow (method 1)</TITLE>
  </HEAD><BODY>
    <H2>JavaScript slideshow</H2>
    <!-- Znacznik obrazka do podmiany -->
    <P><IMG SRC="slide1.jpg"></P>
    <!-- Dołączenie naszego skryptu -->
    <SCRIPT LANGUAGE="JavaScript" SRC="slides1.js"></SCRIPT>
  </BODY>
</HTML>

// Tablica nazw plików slajdów
var slidelist = new Array (3);
// Wypełnianie tablicy
slidelist[0] = "slide1.jpg";
slidelist[1] = "slide2.jpg";
slidelist[2] = "slide3.jpg";
// Numer bieżącego slajdu i ilosć slajdów
var slidenr = 0;
var slidecount = slidelist.length;
// Obiekt slajdu
var objslide = document.images[0];
// Zmiana slajdu
function nextslide () {
  slidenr++;
  if (slidenr >= slidecount) {
    slidenr = 0;
  }
  objslide.src = slidelist[slidenr];
}
// Zegar zmieniający slajd co 2 sekundy
window.setInterval (nextslide, 2000);

Głębsze wyjaśnienia są zawarte w komentarzach. Jednak, nie jest to wcale najlepszy sposób tworzenia pokazu slajdów. Lepiej zrobić to inaczej:

<HTML>
  <HEAD>
    <TITLE>Slideshow (method 2)</TITLE>
  </HEAD><BODY>
    <H2>JavaScript slideshow</H2>
    <P>
      <!-- Osobny znacznik dla każdego slajdu -->
      <IMG CLASS="slide" SRC="slide1.jpg">
      <IMG CLASS="slide" SRC="slide2.jpg">
      <IMG CLASS="slide" SRC="slide3.jpg">
    </P>
    <!-- Dołączenie skryptu -->
    <SCRIPT LANGUAGE="JavaScript" SRC="slides2.js"></SCRIPT>
  </BODY>
</HTML>

// Tablica slajdów-obiektów
var slidelist = new Array ();
// Numer slajdu i licznik pętli
var slidenr = 0, i;
// Znajdź wszystkie slajdy
for (i = 0; i < document.images.length; i++) {
  var element = document.images[i];
  if (element.className == "slide") {
    slidelist.push (element);
  }
}
// Ilość slajdów
var slidecount = slidelist.length;
// Ukrywanie wybranego slajdu
function hideslide (nr) {
  slidelist[nr].style.display = "none";
}
// Pokazywanie wybranego slajdu
function showslide (nr) {
  slidelist[nr].style.display = "inline";
}
// Następny slajd
function nextslide () {
  // Ukryj stary slajd
  hideslide (slidenr);
  // Zwiększ numer slajdu
  if (++slidenr >= slidecount) {
    // Gdy koniec, rozpocznij na nowo
    slidenr = 0;
  }
  // Pokaż nowy slajd
  showslide (slidenr); 
}
// Ukryj slajdy poza pierwszym
for (i = 1; i < slidecount; i++) {
  hideslide (i);
}
// Zegar zmieniający slajd co 2 sekundy
window.setInterval (nextslide, 2000);

Ten skrypt jest dłuższy i bardziej złożony. Dlaczego tak? Takie podejście ma kilka zalet:

  • Nazwy i kolejność obrazków są ustalone w HTML-u. Da się też ustawić wymiary, z osobna dla każdego obrazka.
    Przy zastosowaniu metody pierwszej, nazwy obrazków są zaszyte w skrypcie.
  • Nawiązując do punktu poprzedniego, można użyć jednego skryptu do kilku pokazów slajdów na różnych podstronach.
  • Jeżeli przeglądarka nie obsługuje JavaScriptu lub użytkownik wyłączył JavaScript, zobaczy po prostu wszystkie slajdy naraz.
    Przy zastosowaniu metody pierwszej, zobaczy jedynie pierwszy slajd.
HTML oraz XHTML

0 komentarzy