Basic jQuery Text/Image Rotator

Tabel Konten
  1. Plugin 
  2. Kerangka HTML 
  • Penggunaan 
  • Basic jQuery Text/Image Rotator

    Barusan Saya menemukan kode bagus di sini: Creating a Text Rotator with jQuerySangat sederhana dan mudah dipahami. Sebuah fungsi jQuery slider dasar untuk merotasikan sekelompok elemen di dalam kontainer yang seringkali dicari. Saya mencoba mengonversikannya menjadi plugin seperti ini:

    Plugin 

    (function($) {
        $.fn.rotator = function(settings) {
            settings = jQuery.extend({
                interval: 3000,
                speed: 1000
            }, settings);
    
            return this.each(function() {
                var $t = $(this),
                    $item = $t.children().addClass('item').hide();
    
                $t.addClass('rotator');
    
                // Jalankan animasi jika jumlah item lebih dari satu!
                if ($item.length > 1) {
                    // Tambahkan kelas 'current' pada item pertama sebagai penanda awal slide
                    $item.first().addClass('current').fadeIn(settings.speed);
                    // Menjalankan interval fungsi animasi dengan waktu interval yang telah ditentukan
                    setInterval(function() {
                        var c = $t.find('.current');
                        // Jika item (slide) setelah item aktif tidak ditemukan...
                        if (c.next().length === 0) {
                            // Hilangkan kelas 'current' pada item aktif
                            c.removeClass('current').fadeOut(settings.speed);
                            // Kemudian tambahkan kelas 'current' ke item pertama...
                            // sehingga rotasi bisa dimulai kembali dari awal!
                            $item.first().addClass('current').fadeIn(settings.speed);
                        } else {
                            // Jika tidak (jika item setelah item aktif ditemukan) ...
                            // Hilangkan kelas 'current' pada item aktif
                            // Kemudian tambahkan kelas 'current' pada item berikutnya
                            c.removeClass('current').fadeOut(settings.speed).next().addClass('current').fadeIn(settings.speed);
                        }
                    }, settings.interval);
                }
            });
        };
    })(jQuery);

    Kerangka HTML 

    <div id="slide">
        <div>Konten 1</div>
        <div>Konten 2</div>
        <div>Konten 3</div>
        <div>Konten 4</div>
    </div>

    Penggunaan 

    $(function() {
        $('#slide').rotator({
            interval: 3000,
            speed: 1000
        });
    });
    OpsiKeterangan
    intervalDigunakan untuk menentukan interval pergantian slide
    speedDigunakan untuk menentukan kecepatan animasi pergantian slide

    Demo: Sebagai Text Rotator Demo: Sebagai Image Rotator

    17 Komentar

    • Putra

      itu kalo dibuatin headlinenews keren banget kayaknya :D

      btw, ini kenapa yah. kok layout blogger saya begini :'(
      udah mubeng mubeng di template diutekutek, nggak ketemu.

    • Taufik Nurrohman

      @Alam Perwira Nggak apa-apa. Halaman tata letak blog Saya malah lebih parah. Asalkan tampilan di peramban masih normal tidak masalah. Biasanya itu karena media queries. Berhubung ukuran halaman tata letak Blogger lebih kecil dari ukuran maksimal media queries di dalam template, jadi tampilan satu kolom yang diatur di dalamnya langsung diterapkan :W

    • Unknown

      wah yang imagenya jadi slideshow gitu wah harus di pelajari kalau begini mudah2an cepet ngerti

    • Unknown

      @system of blog Haduh kok yo gak mudeng juga kapan mudengnya kalau begini :(

    • Bayu Handono

      di bikin di bagian header keren kayaknya :D

    • Beben Koben

      basicnya saja sudah is good, apalagi yg advancednya nih ^_^

    • Taufik Nurrohman

      @system of blog Sebenarnya simpel kok :) Ini cuma efek animasi berurutan dari slide awal (current) menuju ke slide terakhir:

      c.removeClass('current')
      .fadeOut(settings.speed)
      .next()
      .addClass('current')
      .fadeIn(settings.speed);

      Dan jika slide setelah slide terakhir tidak ada/tidak ditemukan, ulangi animasi dari awal lagi:

      c.removeClass('current')
      .fadeOut(settings.speed);
      $item.first()
      .addClass('current')
      .fadeIn(settings.speed);
    • MUX SPARROW

      @Taufik Nurrohman
      *mangaps komen yang tadi salah tempat.. lupa copas balas ke siapa.
      wkwkwk kebetulan nih.. mumpung lagi ngomongin yang beginian (apaan lage? :P) btw, Mas.. kalo pengen ngubah template jadi fluid ada cara simpelnya gak? :D

    • Unknown

      @Taufik Nurrohman Thanks bang aku akan Coba baca2 dan pahami mudah2an bs

    • Taufik Nurrohman

      @MUXLIMO Apa ya? Mungkin dirombak dari elemen luarnya dulu, yang biasanya tadinya punya lebar 900px diubah jadi 86% (misalnya). Setelah itu masuk ke dalam, ke posting dan sidebar. Diubah ukurannya dari ukuran mati jadi ukuran persentase berdasarkan lebar elemen induk.

      Terkait: Media Queries

    • Putra

      @Alam Perwira kirain apa gituu hehe :D
      btw, sy mau tanya lagi :D caranya buat image preloader di seluruh image di blog bisa nggak yah? terimakasih sebelumnya :)

    • Taufik Nurrohman

      @Alam Perwira Sudah pernah baca artikel implementasi plugin Lazyloader? :\

    • paij0's

      mantab.. kang...!! trims.

    • kd

      bagaimana mahu mengintegrasikan basic jquery rotator dengan blogger json ?

      jsfiddle :- http://jsfiddle.net/xAQGn/85/

      Saya benar2 mahu jawapannya, kerna saya dalam proses pembinaan laman sesawang cari kerja.

      Terima Kasih.

    Komentar telah ditutup.