Basic JQuery Text/Image Rotator

Barusan Saya menemukan kode bagus di sini: Creating a Text Rotator with JQuery
Sangat 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
    });
});

Opsi	Keterangan
interval	Digunakan untuk menentukan interval pergantian slide
speed	Digunakan untuk menentukan kecepatan animasi pergantian slide

Demo: Sebagai Text Rotator                            Demo: Sebagai Image Rotator

Categories: Blogspot, CSS