Membuat Slide Show Sederhana dengan jQuery

Posted on Updated on


ajax-logoPada 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.

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

selesai

semoga dapat membantu……

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s