Slide Album Dengan Butang Pause

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 berlama-lama di gambar atau lihat paparan '.gif' imej.

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

• 
• 
• 
• 
• 
• 
• 
• 
• 

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

Awalnya karya pegun di atas aku pinjam dari Peter Callesen tapi mungkin kena beli kot sekarang ni gambar-gambar tu. Jadi aku tukar dengan gambar matahari terbit yang aku snap sendiri.

Manakala imej-imej .gif pula adalah antara koleksi Jlegend83; EruruuTail; dan Cyberbublic yang aku pinjam dari devianART.

Cubalah.