Home » , » Basic JQuery Text/Image Rotator

Basic JQuery Text/Image Rotator



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

OpsiKeterangan
intervalDigunakan untuk menentukan interval pergantian slide
speedDigunakan untuk menentukan kecepatan animasi pergantian slide

Demo: Sebagai Text Rotator                            Demo: Sebagai Image Rotator


0 comments:

Post a Comment

Visitor

RECENT POSTS

Followers