Barusan Saya menemukan aba-aba manis di sini: Creating a Text Rotator with jQuerySangat sederhana dan gampang dipahami. Sebuah fungsi jQuery slider dasar untuk merotasikan sekelompok elemen di dalam kontainer yang seringkali dicari. Saya mencoba mengonversikannya menjadi plugin ibarat 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 bila 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) sehabis 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 dapat dimulai kembali dari awal! $item.first().addClass('current').fadeIn(settings.speed); } else { // Jika tidak (jika item sehabis 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 memilih interval pergantian slide |
| speed | Digunakan untuk memilih kecepatan animasi pergantian slide |