Home » » Slide Album Dengan Butang Pause

Slide Album Dengan Butang Pause

EmpayarUtama - Tuesday, October 15, 2013 : 4 comments

Slide kali ini guna jQuery sedia ada dalam blog. Tapi dengan penambahan fungsi butang 'back', 'pause', 'play' dan 'next'.

Untuk sesuaikan slide jenis ini, aku cuba letak beberapa '.gif' imej. Walaupun masa setiap imej (forward interval) ditetapkan pada 5000; tempoh paparan '.gif' imej mungkin
lebih panjang. Oleh itu penggunaan butang 'pause' amat membantu untuk kita lihat paparan '.gif' imej hingga tamat.

Di bawah adalah contoh slidenya. Ada 8 gambar serta 4 '.gif' imej :

  • Caius vs Lightning
  • Raiden
  • Genesis
  • Power of Cosmos


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<style>
ul.ppt {position: relative; height: 260px;}
.ppt li {list-style-type: none;position: absolute;top: 0;left: 10px;}
.ppt img {border: 1px solid #e7e7e7;padding: 5px;background-color: #ececec;width: 450px; height: 255px; overflow hidden; }
</style>

<ul class="ppt">
<li><img src="imej pertama" alt=""></img></li>
<li><img src="imej kedua" alt=""></img></li>
<li><img src="imej ketiga" alt=""></img></li>
<li><img src="imej keempat" alt=""></img></li>
<li><img src="imej kelima" alt=""></img></li>
</ul>

<div style="text-align: center;">
<button type="button" id="back">Semula</button>
<button type="button" id="stop">Pause</button>
<button type="button" id="play">Play</button>
<button type="button" id="fwd">Teruskan</button>
</div>

<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();

var cur = $('.ppt li:first');
var interval;

$('#fwd').click( function() { goFwd(); showPause(); } );
$('#back').click( function() { goBack(); showPause(); } );
$('#stop').click( function() { stop(); showPlay(); } );
$('#play').click( function() { start(); showPause(); } );

function goFwd() { stop(); forward(); start(); }
function goBack() { stop(); back(); start(); }
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
function showPause() {
$('#play').hide();
$('#stop').show();
}
function showPlay() {
$('#stop').hide();
$('#play').show();
}
function start() {
interval = setInterval( "forward()", 5000 );
}
function stop() {
clearInterval( interval );
}
$(function() {
start();
} );
</script>

Keterangan warna :

jQuery warna merah tak perlu jika blog korang dah ada (Mungkin ada dalam template blog; dalam posting sebelum ini; atau di widget kat sidebar). Dapatkan versi terkini lagi bagus.

Kalau rajin - segala yang berwarna biru boleh diejas ikut suka hati janji sedap mata memandang. Sesuaikan ketinggian berwarna oren supaya butang-butang tidak tersorok di belakang slide/imej.

Manakala butang-butang yang ditanda dengan warna hijau boleh ditukar dengan imej lain (lihat contoh). Satu lagi, dalam kod nih ada 5 imej je. Tambah le kalau nak lebih.

Karya pegun di atas aku pinjam dari Peter Callesen manakala imej-imej .gif pula adalah antara koleksi Jlegend83; EruruuTail; dan Cyberbublic yang aku pinjam dari devianART.

Cubalah.







4 Comments

4 comments:

  1. teringin gak nak letak slide show..segan tapi..hehehe

    ReplyDelete
  2. Makasih Domu-kon dan kak Kesuma Angsana. Bukan apa, saya suka tengok slideshow kat websites/blog orang lain tapi kebanyakannya cuma kat sidebar atau belah atas posting. Itu yang saya cuba 'apply'kan dalam posting pulak. Manalah tau boleh jadi ^_^

    ReplyDelete
  3. Buku terbaru "Kegagalan Emas Sebagai Aset Pelaburan" cukup bagus untuk dibaca.
    Jangan tertipu dengan pelaburan bahaya ini yang tidak menguntungkan sesiapapun.
    Tahukah anda emas ini bukannya islamik seperti yang mereka selalu laung-laungkan?
    Layari sirikegagalanemas.wordpress.com untuk mengetahui lebih lanjut.
    Terima kasih.

    Team Virtus

    ReplyDelete

Tulisle apa pun, aku baca ^_~