--> Cara Mengganti Background Berubah Otomatis
Home jQuery

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 -

Baca juga :


5 komentar

  1. 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.

    mas kalo imgaenya ga dari path yang sama gimana? misal source imagenya acak?

    BalasHapus
    Balasan
    1. Didalam Jquery yang sejatinya hanya teknik manipulasi data / code, maka pada tutorial menampilkan gambar background secara otomatis juga sebenarnya hanya buatan / manipulasi sederhana saja. Jika agan menginginkan path / file name img ngacak mungkin dengan teknik manual pemanggilan file name img didalam source code nya langsung. Nama file nantinya bisa di manipulasi dengan variable sederhana, misal var img1 = "images/inigambarburung.jpg"; dan seterusnya.

      Hapus
    2. nanti scriptnya jadi gimana mas contohnya. saya masih bingung

      Hapus
  2. Keren ka,,tampilan blog dengan background yang menarik akan membuat pengunjung lebih betah dan nyaman,,thanks ilmunya
    Kunjungi website kampus saya ya http://www.atmaluhur.ac.id
    Dan web blog saya https://astutiernawati.mahasiswa.atmaluhur.ac.id/

    BalasHapus
  3. Saya belum ngerti tolong vantu

    BalasHapus

Dilarang SPAM Komentar!

to Top