Kalau kita sedang browsing atau blogwalking ke blog temen temen kita, pasti seneng deh kalo di sambut dengan tampilan web yang menarik dan konten yang gak kalah asik. maka dari itu mari kita rajin rajin menghiasi blog kita agar tetep menarik di mata pengunjung, layaknya seperti rumah manusia, kalau anda bertamu ke rumah yang bagus kan juga betah gitu.
Nah kali ini saya akan berbagi tips untuk membuat gambar sliding atau gambar yang berganti ganti dalam satu tempat, atau tak taulah namanya. pokoknya begitu.
script ini menggunakan JQuery dalam implementasinya, yook langsung praktek aja daripada banyak baca malah puyeng ntar.
Cari kode
Nah kali ini saya akan berbagi tips untuk membuat gambar sliding atau gambar yang berganti ganti dalam satu tempat, atau tak taulah namanya. pokoknya begitu.
script ini menggunakan JQuery dalam implementasinya, yook langsung praktek aja daripada banyak baca malah puyeng ntar.
Cari kode
</head>
(gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah menemukan kode tersebut tepat di atas </head> letakkan kode script berikut ini: <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1100, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 6000 );
});
</script>
<!-- Sesuaikan style dengan desain halaman anda -->
<style type="text/css">
#slideshow {
position:relative;
height:200px;
padding:0px;
margin:10px 0 -30px 0;
}
#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 200px;
background-color: #FFF;
padding:0px;
margin:0px;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 200px;
display: block;
border: 0;
margin-bottom: 0px;
}
</style>
0 comments:
Post a Comment