Cara Mengganti Background Berubah Otomatis
- Apasi maksud dari tutorial ini, sebelum kita masuk ke pembahasan yang lebih jauh. Jadi, maksud mengganti background berubah otomatis ialah background yang kita pasang di blog atau website ingin kita tampilkan lebih dari satu gambar dan itu sanggup berubah sendiri dengan otomatis, kurang lebih menyerupai itu.
Seperti pada wallpaper pada sistem operasi Windows yang sanggup berubah-ubah otomatis selama sekian detik sesuai waktu yang ditentukan. Setelah beberapa detik sesuai waktu yang ditentukan, gambar pada background akan berubah otomatis (keren bukan).
Belajar JQuery: Mengganti Background Berubah Otomatis
Untuk mempraktekan kita harus siapkan dulu beberapa gambar yang akan dijadikan sebagai background. Gambar-gambar tadi akan kita beri nama berurutan, bg0, bg1, bg2, bg3, dan bg4, sehingga kita lebih gampang dalam mengambil nama gambarnya didalam script jQuery.
Untuk mencoba, sebab ini hanya HTML dan Javascript (jQuery) maka sanggup di praktikan cukup dengan browser biasa, tidak harus memakai Web Server. Silakan eksklusif saja dipraktikan dirumah masing-masing ya hee :).
- siapkan background image tadi dari bg0, bg4 dan simpan di folder images.
- siapkan file jQuerynya jquery-3.1.1.min.js yang disimpan di folder js.
<!DOCTYPE html> <html> <head> <title>Cara Mengganti Background Berubah Otomatis</title> <style type="text/css"> body { background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-image: url(images/bg1.jpg); transition: 1.5s linear; -moz-transition: 1.5s linear; } </style> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var bg=[0,1,2,3,4]; var index=0; setInterval(function(){ index=(index + 1) % bg.length; $('body').css('background-image','url("images/bg'+index+'.jpg")'); },5000); }); </script> </head> <body> </body> </html> Perhatikan script CSS Mengganti Background Berubah Otomatis diatas. Properti background-size diberi nilai cover supaya lebar dan tinggi background menyesuaikan lebar halaman. Pada CSS juga ditambahkan properti transition supaya perubahan gambar lebih halus. Untuk pengaturan waktu terjadinya perubahan background, pada script diatas memakai salah satu fungsi javascript yaitu setInterval() yang diset nilainya 5000 ms atau 5 detik.
Untuk memilih gambar yang tampil ialah dengan mengubah nilai indeks sama dengan sisa bagi dari indeks ditambah satu dengan panjang array bg yaitu 5. Misalnya nilai indeks sebelumnya ialah 3, maka indeks kini ialah sisa bagi (3+1)/5 yaitu 4, maka background yang tampil ialah bg4.jpg, begitu seterusnya.
Sudah berhasil kan praktiknya, gampang bukan. Sekian dulu tutorial Cara Mengganti Background Berubah Otomatis dengan jQuery, semoga bermanfaat.
Terima kasih sudah berkunjung, dan jangan bosan mencar ilmu di blog ini.
- salam -