Membuat Slide Show Sederhana dengan jQuery
Pada artikel sebelumnya telah dibahas mengenai apa itu jQuery. Pada artikel ini kita akan mencoba membuat sebuah contoh sederhana penerapan jQuery dalam membuat slide show, yaitu animasi yang menampilkan gambar secara bergantian dan berurutan. Gunanya untuk menyampaikan informasi promo atau informasi singkat tentang website kita.
Langkah pertama
Siapkan beberapa gambar untuk slide show yang nantinya akan kita tampilkan secara berurutan. Ukuran gambar harus sama tinggi dan lebarnya dan usahakan ukuran file tidak terlalu besar agar tidak memperlambat waktu loading. Kita bisa menggambar menggunakan Photoshop, Gimp atau editor grafik lain nya.
Langkah kedua
Sisipkan kode di bawah ini pada dokumen HTML anda dimana akan dipasang slide show. Sesuaikan nama gambar pada contoh di bawah dengan nama-nama file gambar anda. Sesuaikan juga ukuran-ukuran pada style. Setelah itu upload ke server web dan lihat hasilnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<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>
<div id="slideshow">
<!-- Tambahkan gambar2 slide show disini -->
<div class="active"><img src="images/slide_p8m-1.png" alt="Produk Bisnis Online" /></div>
<div><img src="images/slide_p8m-2.png" alt="Penghasilan dari Internet" /></div>
<div><img src="images/slide_p8m-3.png" alt="Bisnis online" /></div>
<div><img src="images/slide_p8m-4.png" alt="Mencari uang" /></div>
</div> |
Demo slide show di atas bisa dilihat di halaman ini.
