Javascript Slideshow Dasar - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / Javascript Slideshow Dasar
dimana di dalamnya terdapat elemen gambar dengan nilai JavaScript Slideshow Dasar
<figure>     <img src="" id="image" alt=" dimana di dalamnya terdapat elemen gambar dengan nilai  JavaScript Slideshow Dasar">     <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=" dimana di dalamnya terdapat elemen gambar dengan nilai  JavaScript Slideshow Dasar">     <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 dikala 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 yakni 0, jadi array yang akan diambil yakni 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 yakni jumlah nilai di dalam slide:

// Awalan: set tampilan navigasi mundur sebagai teks mati //         set deskripsi halaman dikala 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 yakni 0, dikala navigasi maju diklik, maka nilai i akan bermetamorfosis 1, lalu menjadi 2, menjadi 3 dan seterusnya. Begitu pula sebaliknya, dikala 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 dikala ini setiap kali fungsi dihukum     // 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;}

Sumber https://www.dte.web.id/

Javascript Slideshow Dasar

dimana di dalamnya terdapat elemen gambar dengan nilai JavaScript Slideshow Dasar
<figure>     <img src="" id="image" alt=" dimana di dalamnya terdapat elemen gambar dengan nilai  JavaScript Slideshow Dasar">     <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=" dimana di dalamnya terdapat elemen gambar dengan nilai  JavaScript Slideshow Dasar">     <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 dikala 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 yakni 0, jadi array yang akan diambil yakni 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 yakni jumlah nilai di dalam slide:

// Awalan: set tampilan navigasi mundur sebagai teks mati //         set deskripsi halaman dikala 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 yakni 0, dikala navigasi maju diklik, maka nilai i akan bermetamorfosis 1, lalu menjadi 2, menjadi 3 dan seterusnya. Begitu pula sebaliknya, dikala 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 dikala ini setiap kali fungsi dihukum     // 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;}

Sumber https://www.dte.web.id/
Gambar Javascript Potongan
Langganan: Posting Komentar (Atom)