dengan asumsi bahwa kemarin sudah punya jquery-1.6.2.min.js
dan juga sudah ada jquery-ui-1.8.16.custom.css
serta jquery-ui-1.8.16.custom.min.js
sedot ini dulu:
taruh di folder js
letakkan ini di antara <head> dan </head>
<script type="text/javascript">
$(document).ready(function(){
$("#da-vinci-carousel").CloudCarousel(
{
reflHeight: 30,
reflGap:0,
xPos: 495,
yPos: 25,
speed:0.2,
FPS:30,
autoRotate: 'left',
autoRotateDelay: 3000,
mouseWheel:true
}
);
});
</script>
taruh ini di <body>
<div id="da-vinci-carousel" style="width:990px; height:450px; overflow:hidden;">
<img class="cloudcarousel" src="images/gambar1.jpg">
<img class="cloudcarousel" src="images/gambar2.jpg">
<img class="cloudcarousel" src="images/gambar3.jpg">
<img class="cloudcarousel" src="images/gambar4.jpg">
<img class="cloudcarousel" src="images/gambar5.jpg">
</div>
penjelasan:
untuk skrip:
reflHeight = tingginya bayangan
reflGap = celah antara gambar dan bayangan
xPos, yPos = koordinat titik tengah rotasi gambar
speed = kecepatan putaran dalam detik
FPS = frame per second
autoRotate = arah putaran
autoRotateDelay = jeda antara putaran
mouseWheel = gambar berputar bila roda di mouse diputar
untuk body div
div id="da-vinci-carousel" <= ini namanya identifier
style = tentukan ukuran bidang animasi, lebar 990px, tinggi 450px
overflow:hidden = kalau lewat dari bidang itu, gambarnya terpotong
img class="cloudcarousel" <= identifier untuk image
ICC
0 komentar:
Post a Comment