Membuat Slide Gambar dengan javascript jquery

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 </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>

Untuk langkah kedua sekaligus langkah terakhir sobat pergilah ke pasar (hush!!! pasar mulu pent-) maksud kami pergilah ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:

<div id="slideshow">
<div class="active"><a href='#satu'><img src="http://i1048.photobucket.com/albums/s379/mansengkol/1LZakiyurrahman.jpg"/></a></div>
<div><img src="http://i1048.photobucket.com/albums/s379/mansengkol/2LaluSudiana.jpg"  /></div>
<div><img src="http://i1048.photobucket.com/albums/s379/mansengkol/3Sadri.jpg"  /></div>
<div><img src="http://i1048.photobucket.com/albums/s379/mansengkol/4FathurrahmanMPd.jpg"  /></div>
</div>

Sumber : http://sucipto.net/2012/02/21/membuat-slide-gambar-dengan-javascript-by-sucipto/

Share