Playground untuk JavaScript Slideshow Dasar

http://hompimpaalaihumgambreng.blogspot.com/2012/07/javascript-slideshow-dasar.html?showComment=1355925162513#c6359294650474484243

by Taufik Nurrohman

HTML

<figure class="slideshow">
    <a style="display:block;" href="http://hompimpaalaihumgambreng.blogspot.com"><img src="" id="image" alt=""></a>
    <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>

CSS

body {
  text-align:center;
  background-color:pink;
}
figure.slideshow {
  display:inline-block;
  border:1px solid black;
  background-color:white;
  padding:10px;
  margin:10px auto;
  text-align:center;
}
figure.slideshow nav {margin:10px 0 0}
figure.slideshow img {display:none}
figure.slideshow a + span {background-color:yellow}

JavaScript

var slide = [ // Setiap slide dikumpulkan dalam array
        "http://1.bp.blogspot.com/-jrMCCmrYSY4/T6Aoe9Z2fBI/AAAAAAAACno/JBRwhDUDAV0/s400/green-grass.jpg", // slide[0]
        "http://1.bp.blogspot.com/-j8Juf_L4q5g/TmL_x6U54bI/AAAAAAAAAzE/HVf40rUrJQE/s320/319.jpg", // slide[1]
        "http://2.bp.blogspot.com/_yGa4b5VGx6w/S_Sbmhqh14I/AAAAAAAAAFw/7Fs8bxAWdzk/s320/sky-flower.jpg", // slide[2]
        "http://1.bp.blogspot.com/-P5SF0SFn_nA/T6AqorI8pnI/AAAAAAAACnw/MUUrR0W4e2M/s400/grass-bg.jpg", // slide[3]
        "http://2.bp.blogspot.com/-unuh0jZwHw4/T7uHKYS6c2I/AAAAAAAACtk/ns7qXyu_pTA/s600/The-best-top-autumn-desktop-wallpapers-35.jpg"  // slide[4]
        // Dan seterusnya...
        // Tambahkan sendiri. Pisahkan setiap slide dengan tanda koma
    ],
    title = [ // Judul untuk setiap gambar
        "Gambar 1",
        "Gambar 2",
        "Gambar 3",
        "Gambar 4",
        "Gambar 5"
    ],
    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[0]
// Dalam hal ini: slide[i] = slide[0] = "image/1.jpg"
img.setAttribute('src', slide[i]);

// 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 = title[i] + " (Image " + (i + 1) + " of " +...