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