Cara Membuat Photo Slider
Photo Slider adalah sebuah slide foto sederhana yang memungkinkan anda menelusuri dan menampilkan jumlah foto yang tidak terbatas berikut deskripsinya, melalui siklus manual dengan memanpaatkan tombol "next" dan "back" yang melengkapinya.
Contoh:
 |
Cara Memasang Photo Slider
Cukup dengan meletakan script contoh berikut ini pada <body> halaman anda.
<table border="0" cellpadding="0">
<caption><strong>Gallery Buku Catatan si Ugi</strong></caption>
<tr>
<td width="100%"><img src="http://www.javascriptkit.com/script/script2/plane1.gif" width="400" height="264" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p>
<script language="JavaScript1.1">
/*
Photo Slider II- By Kevin Adams (kadams@kyk.net)
For this script and more
Visit http://www.javascriptkit.com
*/
var photos=new Array()
var text=new Array()
var which=0
var what=0
//Change the below variables to reference your own images. You may have as many images in the slider as you wish
photos[0]="http://www.javascriptkit.com/script/script2/plane1.gif"photos[1]="http://www.javascriptkit.com/script/script2/plane2.gif"photos[2]="http://www.javascriptkit.com/script/script2/plane3.gif"photos[3]="http://www.javascriptkit.com/script/script2/plane4.gif"photos[4]="http://www.javascriptkit.com/script/script2/plane5.gif"//change coresponding description
text[0]="B2 Stealth Bomber"text[1]="F15 Tom Cat!"text[2]="Russian Su27 Fighter Jet"text[3]="Some training jet."text[4]="Commerical Airliner"window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
</script>
<p><input type=text name="description" style="width:400px" size=50>
<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br />
<a href="#" onClick="which=1;what=1;backward();return false">Start Over</a></p>
</center></div>
</form>
</td>
</tr>
</table>
Keterangan:
Silahkan ganti Gambar berikut deskripsinya.sumber: javascriptkit
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon