Membuat Slide Gambar dengan javascript

Kalau kamu sedang browsing atau blogwalking ke blog temen temen kamu, 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. :D

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 :D.

script ini menggunakan JQuery dalam implementasinya, yook langsung praktek aja daripada banyak baca malah puyeng ntar :D

[html]

<script src=“https://code.jquery.com/jquery-latest.js"&gt;&lt;/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>

<div id=“slideshow”> <!– Tambahkan gambar2 slide show disini –> <div class=“active”><a href=’#satu’><img src=“expo smk bisa ngawi.png” alt=“Produk Bisnis Online” /></a></div> <div><img src=“psb-smkn1-ngawi.png” alt=“Penghasilan dari Internet” /></div> </div> [/html]

dalam script di atas terdapat tag tag html, dan berikut penjelasanyooo:

tag [html]<script type=“text/javascript”>[/html]

di atas berisi kode kode javascript yang menghandle dan membuat gambar yang akan kita tampilkan menjadi berganti secara otomatis.

tag div [html]<div id=“slideshow”>[/html] yang berisi gambar gambar akan di buka secara bergantian.

Sekian terimakasih..

Salam Coding.. :D