Sekian lama mengobak-ngabik web, ternyata ketemu juga nich sob Image slider/slideshow jQuery plugin. Maksudnya ketemu yg cocok dipasang di blog aku Beben si bloglang ganteng kalem tea :)) =)) Selayang pandang mengenai image slidehow/slider yaitu, image yg silih berganti dengan lembutnya diatur dengan irama agar terlihat gaya dengan menggunakan jQuery script :D ;)) Pada sesi ini, aku tidak akan menerangkan bagaimana cara memasang di template blog sobat. Tinggal mengikuti langkah² yg sudah ada saja kok sob :-bd Dua metode ini paling simpel ditemukan disinih sob:Silahkan dipilih mana yg menurut sobat paling mudah dipakainya. Untuk sobat Ardhiansyam http://www.berandabumi.co.cc/ yg aku tengok suka mengulik-ngulik jQuery juga, dan dia berkata pada balasan komentar aku diblognya
Segera dipublikasikan sob, biar ga penasaranHere's bro cekgidot buka web keren berikut http://www.claudiowebdesign.it/ ► Klik kategori Blog ► Cari postingan dg judul "New jQuery Plugin: Spiral animations" Happy jQuery brooo \m/ and see yah :-h
jQuery plug-in slideshow terpendek kayaknya mah ini nih (http://snook.ca/) ;)) :D
jQuery Plug-in
<script type='text/javascript'>
jQuery(function(){
jQuery('.fadein img:gt(0)').hide();
setInterval(function(){
jQuery('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
jQuery(function(){
jQuery('.fadein img:gt(0)').hide();
setInterval(function(){
jQuery('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
Kode CSS
.fadein{position:relative;height:120px}
.fadein img{position:absolute; left:0; top:0}
Kode HTML
<div class="fadein">
<img alt='' src='http://your-link-image1.jpg'/>
<img alt='' src='http://your-link-image2.jpg'/>
<img alt='' src='http://your-link-image3.jpg'/>
<img alt='' src='http://your-link-image4.jpg'/>
<img alt='' src='http://your-link-image5.jpg'/>
<img alt='' src='http://your-link-image6.jpg'/>
</div>
<img alt='' src='http://your-link-image1.jpg'/>
<img alt='' src='http://your-link-image2.jpg'/>
<img alt='' src='http://your-link-image3.jpg'/>
<img alt='' src='http://your-link-image4.jpg'/>
<img alt='' src='http://your-link-image5.jpg'/>
<img alt='' src='http://your-link-image6.jpg'/>
</div>
Loading... |
7 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...