Mecha versi 2.6.3 sudah dirilis!

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

Unknown

Ternyata FeelingQ bener pasti sekali ngepost tentang Slideshow :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  [email protected]
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.