JavaScript Slideshow Dasar

Tabel Konten
  1. Penjelasan Singkat 
    1. Sistem Navigasi 
    2. CSS 
JavaScript Slideshow Dasar
<figure>
    <img src="" id="image" alt="">
    <span id="loading">Loading...</span>
    <nav>
        <span id="prev"><a href="javascript:navigate(0);">Prev</a></span>
         - <strong id="num"></strong> - 
        <span id="next"><a href="javascript:navigate(1);">Next</a></span>
    </nav>
</figure>

<script>
    var slide = [
            "image/image1.jpg",
            "image/image1.jpg",
            "image/image1.jpg",
            "image/image1.jpg",
            "image/image1.jpg"
        ],
        prev = document.getElementById('prev'),
        next = document.getElementById('next'),
        curr = document.getElementById('num'),
        prev_a = prev.innerHTML,
        next_a = next.innerHTML,
        prev_d = prev_a.replace(/<\S[^>]*>/g, ""),
        next_d = next_a.replace(/<\S[^>]*>/g, ""),
        img = document.getElementById('image'),
        loading = document.getElementById('loading'),
        i = 0;

    img.setAttribute('src', slide[i]);

    if (i == 0) {
        prev.innerHTML = prev_d;
        curr.innerHTML = "Image " + (i + 1) + " of " + slide.length;
    }

    // SISTEM NAVIGASI
    function navigate(dir) {
        prev.innerHTML = prev_a;
        next.innerHTML = next_a;
        if (dir == 1) {
            i++;
            img.setAttribute('src', slide[i]);
            if (i == slide.length - 1) next.innerHTML = next_d;
        } else {
            i--;
            img.setAttribute('src', slide[i]);
            if (i == 0) prev.innerHTML = prev_d;
        }
        curr.innerHTML = "Image " + (i + 1) + " of " + slide.length;
        loading.style.display = "block";
        img.style.display = "none";
    }

    img.onload = function() {
        loading.style.display = "none";
        this.style.display = "block";
    };
</script>

Lihat Demo

Penjelasan Singkat 

Kerangka slideshow terdiri dari elemen <figure> dimana di dalamnya terdapat elemen gambar dengan nilai src kosong dan juga navigasi:

<figure>
    <img src="" id="image" alt="">
    <span id="loading">Loading...</span>
    <nav>
        <span id="prev"><a href="javascript:navigate(0);">Prev</a></span>
         - <strong id="num"></strong> - 
        <span id="next"><a href="javascript:navigate(1);">Next</a></span>
    </nav>
</figure>

Setiap slide dikumpulkan dalam array, dan akan digilir penyisipan URL gambarnya setiap kali navigasi diklik:

var slide = [ // Setiap slide dikumpulkan dalam array
        "image/image1.jpg", // slide[0]
        "image/image1.jpg", // slide[1]
        "image/image1.jpg", // slide[2]
        "image/image1.jpg", // slide[3]
        "image/image1.jpg"  // slide[4]
        // Dan seterusnya...
        // Tambahkan sendiri. Pisahkan setiap slide dengan tanda koma
    ];

Meringkas semua elemen yang ditemukan menjadi variabel:

prev = document.getElementById('prev'), // Navigasi mundur
next = document.getElementById('next'), // Navigasi maju
curr = document.getElementById('num'),  // Deskripsi halaman saat ini
prev_a = prev.innerHTML,                // Duplikat konten navigasi mundur
next_a = next.innerHTML,                // Duplikat konten navigasi maju
prev_d = prev_a.replace(/<\S[^>]*>/g, ""), // Navigasi mundur berupa teks mati
next_d = next_a.replace(/<\S[^>]*>/g, ""), // Navigasi maju berupa teks mati
img = document.getElementById('image'),       // Gambar
loading = document.getElementById('loading'), // Indikator sedang memuat/loading
i = 0; // Awal

Set gambar dengan nilai src berupa array slide[i]. Saat ini nilai i adalah 0, jadi array yang akan diambil adalah slide[0] yaitu "image/image1.jpg"

// Set gambar dengan nilai src berupa array slide[0]
// Dalam hal ini: slide[i] = slide[0] = "image/1.jpg"
img.setAttribute('src', slide[i]);

Set tampilan navigasi slideshow pada posisi awal (yaitu navigasi mundur berupa tombol mati dan navigasi maju berupa tombol hidup). slide.length adalah jumlah nilai di dalam slide:

// Awalan: set tampilan navigasi mundur sebagai teks mati
//         set deskripsi halaman saat ini menjadi "Image 1 of 5"
// Dalam hal ini: i = 0; (i + 1) = 1; slide.length = 5;
if (i == 0) {
    prev.innerHTML = prev_d;
    curr.innerHTML = "Image " + (i + 1) + " of " + slide.length;
}

Sistem Navigasi 

Pada dasarnya ini hanyalah sebuah sistem untuk menambah dan mengurangi nilai i. Pada awal deklarasi, nilai i adalah 0, saat navigasi maju diklik, maka nilai i akan berubah menjadi 1, kemudian menjadi 2, menjadi 3 dan seterusnya. Begitu pula sebaliknya, saat navigasi mundur diklik, maka nilai i akan berkurang. Proses peningkatan dan penambahan variabel ini berfungsi untuk mengganti nilai array slide[i] dalam img.setAttribute('src', slide[i]); sehingga URL gambar yang disisipkan akan berganti secara bergiliran dan berurutan:

// SISTEM NAVIGASI
function navigate(dir) {

    // Langkah reset: Isi navigasi mundur dan maju dengan masing-masing duplikatnya
    prev.innerHTML = prev_a;
    next.innerHTML = next_a;

    // Jika dir == 1, artinya navigasi maju, selain itu berarti navigasi mundur
    // <a href="javascript:navigate(1);"> ** maju!
    // <a href="javascript:navigate(0);"> ** mundur!
    if (dir == 1) {
        // Tingkatkan nilai i dengan 1 (i++ = i+1)
        i++;
        // Set gambar dengan nilai src berupa array slide[berikutnya]
        img.setAttribute('src', slide[i]);
        // Jika i < (5-1), set tampilan navigasi maju sebagai teks mati
        if (i == slide.length - 1) next.innerHTML = next_d;
    } else {
        // Kurangi nilai i dengan 1 (i-- = i-1)
        i--;
        // Set gambar dengan nilai src berupa array slide[sebelumnya]
        img.setAttribute('src', slide[i]);
        // Jika i == 0, set tampilan navigasi mundur sebagai teks mati
        if (i == 0) prev.innerHTML = prev_d;
    }

    // Set ulang deskripsi halaman saat ini setiap kali fungsi dieksekusi
    // Dalam hal ini: setiap kali navigasi diklik
    curr.innerHTML = "Image " + (i + 1) + " of " + slide.length;
    // Tampilkan indikator sedang memuat
    loading.style.display = "block";
    // Sembunyikan gambar
    img.style.display = "none";

}

Saat ini elemen gambar masih disembunyikan: img.style.display = "none";Sedangkan indikator 'sedang memuat' ditampilkan: loading.style.display = "block";

Setelah gambar termuat, sembunyikan indikator “sedang memuat” dan tampilkan gambar:

// Saat gambar termuat...
img.onload = function() {
    // Hilangkan indikator sedang memuat
    loading.style.display = "none";
    // tampilkan kembali gambar yang kita sembunyikan tadi
    this.style.display = "block";
}

CSS 

figure {
  display:inline-block;
  border:1px solid black;
  background-color:white;
  padding:10px;
  margin:10px auto;
  text-align:center;
}

figure nav  {margin:10px 0 0;}
figure img  {display:none;}
figure span {background-color:yellow;}

9 Komentar

  • abang ichal

    wahhh nambah ilmu nihh

  • Unknown

    Ternyata FeelingQ bener pasti sekali ngepost tentang Slideshow :D

  • Bayu Handono

    muncul kembali mas topik :D

  • Unknown

    Udah dapat wangisit setelah hilang dan tidak di ketahui keberadaan-nya beberapa pekan...heheee
    keren dah dan perlu di coba ini....

  • Lilih

    pertanyaan ane satu gan. bagaimana caranya setiap gambar yang di slider diberi keterangan masing-masing. terima kasih jawabannya.

    • Taufik Nurrohman

      Tambahkan array satu lagi untuk daftar judul. Katakanlah namanya title:

      var title = [
      "Judul Gambar 1",
      "Judul Gambar 2",
      "Judul Gambar 3",
      "Judul Gambar 4",
      "Judul Gambar 5"
      ];

      Jumlahnya harus sama dengan jumlah URL di dalam array slide. Setelah itu ganti semua kode ini:

      curr.innerHTML = "Image " + (i + 1) + " of " + slide.length;

      dengan kode ini, untuk menampilkan judul di samping keterangan indeks dan jumlah gambar:

      curr.innerHTML = title[i] + " (Image " + (i + 1) + " of " + slide.length + ")";

      Demo: http://jsfiddle.net/tovic/4Xtuy/

  • Unknown

    mau nanya nih mas tofik

    http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/
    bisa gak mas arrowsnya yang di sebelah kanan gak ilang walaupun slidenya udah abis (terakhir). jadi kedua arrowsnya bisa muncul walaupun slidenya udah abis/belum di putar. sehingga efek parallaxnya juga gak bolak-balik jadinya
    intinya kita bisa mencet arrow yang di kanan terus  X@
    contohnya yang gak ilang2
    http://tympanus.net/Tutorials/SlideshowJmpress/

    (binggung mau jelasinnya kayak gimana)
    tapi makasi ya mas sebelumnnya

    • Taufik Nurrohman

      Tidak bisa kalau memakai CSS3.

      • Unknown

        jadi solusinya gimana mas tofik??
        pake url gambar ???

        kayak gimana kodenya ???
        thank's

Komentar telah ditutup.