Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

JavaScript Slideshow Dasar

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 9 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!