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 |
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
Unknown
@system of blog Haduh kok yo gak mudeng juga kapan mudengnya kalau begini :(
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:
Dan jika slide setelah slide terakhir tidak ada/tidak ditemukan, ulangi animasi dari awal lagi:
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
Unknown
@Taufik Nurrohman Thanks bang aku akan Coba baca2 dan pahami mudah2an bs
Taufik Nurrohman
@MUXLIMO Apa ya? Mungkin dirombak dari elemen luarnya dulu, yang biasanya tadinya punya lebar
900px
diubah jadi86%
(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 :)
Taufik Nurrohman
@Alam Perwira Sudah pernah baca artikel implementasi plugin Lazyloader? :\
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/
Taufik Nurrohman
⇒ /2013/03/blogger-feed-rotator-plugin.html