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