Mecha versi 2.6.3 sudah dirilis!

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

    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

    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 :)

    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.

    Taufik Nurrohman

    Mungkin satu sampai dua hari lagi...

    Andi AF Studio

    buset dah ada notifikasinya segala, gila, sumpah, blogger gila, wkwkwkwk :D \o/

    Komentar telah ditutup.