Cara Mengganti Background Berubah Otomatis


Tutorial JQuery

SeniKoding.com - Apasi maksud dari tutorial ini, sebelum kita masuk ke pembahasan yang lebih jauh. Jadi, maksud mengganti background berubah otomatis adalah background yang kita pasang di blog atau website ingin kita tampilkan lebih dari satu gambar dan itu bisa berubah sendiri dengan otomatis, kurang lebih seperti itu.

Seperti pada wallpaper pada sistem operasi Windows yang dapat 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 


mengganti background 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 mudah dalam mengambil nama gambarnya didalam script jQuery.
Untuk mencoba, karena ini hanya HTML dan Javascript (jQuery) maka bisa di praktikan cukup dengan browser biasa, tidak harus menggunakan Web Server. Silakan langsung 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 agar lebar dan tinggi background menyesuaikan lebar halaman. Pada CSS juga ditambahkan properti transition agar perubahan gambar lebih halus. Untuk pengaturan waktu terjadinya perubahan background, pada script diatas menggunakan salah satu fungsi javascript yaitu setInterval() yang diset nilainya 5000 ms atau 5 detik.

Untuk menentukan gambar yang tampil adalah dengan mengubah nilai indeks sama dengan sisa bagi dari indeks ditambah satu dengan panjang array bg yaitu 5. Misalnya nilai indeks sebelumnya adalah 3, maka indeks sekarang adalah sisa bagi (3+1)/5 yaitu 4, maka background yang tampil adalah bg4.jpg, begitu seterusnya.

Sudah berhasil kan praktiknya, mudah bukan. Sekian dulu tutorial Cara Mengganti Background Berubah Otomatis dengan jQuery, semoga bermanfaat.

Terima kasih sudah berkunjung, dan jangan bosan belajar di blog ini.

- salam -


Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Cara Mengganti Background Berubah Otomatis"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -