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
    });
});

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