Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



IMAGE SLIDER CONTOH 3
February 21, 2011
Posted by: Fauzie


JQuery plugin selalunya dibuat atau disediakan dengan begitu kompleks sekali dan ini menyebabkan ramai yang tidak begitu faham untuk menggunakannya. JQuery sebenarnya boleh dipermudahkan. Ini adalah kerana ia mempunyai “inbuilt fuction” “animate()” . Dalam contoh ketiga ini jom kita lihat bagaimana untuk membuat image slider yang menggunakan jQuery yang paling “ringan” tetapi dapat memberi effect yang sangat besar.

"Live demo" di bawah ini dibina dengan menggunakan fungsi “animate”. Sila klik butang bernombor dan anda akan dapati image akan bertukar dari satu image ke satu image yang lain.




"Live Demo"





Model 1: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Model 2:Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.


Kod-kod HTML, CSS dan jQuery untuk membina effect seperti di atas adalah seperti berikut. Walaubagaimana pun kod-kod ini hanya untuk membina satu set image slider sahaja. Contoh yang ditunjukkan di atas sebenarnya mempunyai 2 set kod HTML, CSS dan jQuery yang sama tetapi mempunyai nama tag atau div class yang berlainan.

Untuk melihat bagaimana ia berfungsi, anda boleh copy & paste kod-kod di bawah ke dalam Notepad. Save fail dengan memberi nama yang mempunyai extension .html di belakangnya seperti ini, imageslider.html. Kemudian buka browser, klik File-> Klik Open File-> klik nama fail yang anda simpan atau save tadi.

<html>
<head>
<style type="text/css">
#myslide {
width:160px;
overflow:hidden;
position: relative;
height:170px;
margin-bottom:20px;
border-left:0px solid #000;
border-right:0px solid #000;
border-bottom:0px solid #000;
border-top:0px solid #000;
margin-top:10px;
}
#myslide .cover{
width:640px; /*------- class mystuff width * number of mystuff divs (160 * 3 = 480)---------- */
position: absolute;
height:160px;
}
#myslide .mystuff {
width:160px;
float:left;
padding:0px 0;
}
.button1,.button2,.button3,.button4{
background: yellow;
padding:6px;
display:block;
float: left; margin-right:5px;text-decoration:none;
}
.active{
background:red;
padding:6px;
display:block;
float:left;
outline:none;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div style="clear:both;margin:10px 0;"></div>
<div id="button">
<a class="button1 active" rel="1" href="#">1</a>
<a class="button2" rel="2" href="#">2</a>
<a class="button3" rel="3" href="#">3</a>
<a class="button4" rel="4" href="#">4</a>
</div>

<div class="clear"></div>

<div id="myslide">
<div class="cover">

<div class="mystuff"><img src="http://images.apple.com/iphone/home/images/route-facetime-20101116.png " width="160" height="170"/></div>
<div class="mystuff"><img src="http://images.apple.com/iphone/home/images/route-hd-20101116.png " width="160" height="170"/></div>
<div class="mystuff"><img src=" http://images.apple.com/iphone/home/images/route-retina-20101116.png " width="160" height="170"/></div>
<div class="mystuff"><img src=" http://images.apple.com/iphone/home/images/route-multitasking-20101116.png " width="160" height="170"/></div>
</div> <!-- end of div cover -->
</div> <!-- end of div myslide -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').animate({left:-160*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
});
</script>
</body>
</html>


Kod-kod berwarna "maroon" adalah kod CSS, yang berwarna biru ialah kod-kod HTML dan yang kod-kod berwarna hijau ialah kod jQuery.

Jika anda ingin mencuba membuatnya dalam blog blogger, klik-> Design -> klik Edit html->copy & paste kod-kod berwarna maroon di atas </head>

Kemudian copy & paste kod-kod jQuery dan letakkan di bahagian atas </body>. Bagi kod-kod HTML pula, sila copy & paste kod-kod berwarna biru di dalam bahagian posting. Pastikan anda berada dalam mode Edit Html bukan dalam mode compose.

Nota: Saya sudah lama tidak menggunakan free template yang disediakan oleh blogger atau mana-mana template yang boleh didownload. Oleh yang demikian saya tidak begitu pasti sama ada kod-kod jQuery ini boleh diletakkan di bahagian atas </body> template blogger. Anda boleh mencubanya dengan membuat atau create satu blog latihan.


Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: