Rabu, 17 April 2013

Slide Show Dengan HTMl dan Javascript(otomatis)

Wah akhirnya bisa lagi ney nulis di blog ini.Setelah beberapa lam ditinggalin.Dan untuk kali yang akan ane tulis adalah tentang buat Slide Show gambar Dengan Html dan Javascript.Ini dia scriptnya:

<script type="text/javascript">
var x=0;
function rotate(num){
fs=document.ff.slide;
x=num%fs.length;
if(x<0)
x=fs.length-1;
document.images.show.src=fs.options[x].value;
fs.selectedIndex=x;
}
function auto() {
if(document.ff.fa.value == "Stop" document.ff.fa.value == ""){
rotate(++x);setTimeout("auto()", 3000);
}
}
function jum(){
document.ff.jum.value=x;
}
onload=auto;
</script>
<form name="ff">
<table align="center" cellpadding="3" style="border-collapse: collapse; width: 500px; height: 400px;">
<tbody align="center">
<tr>
<th align="center" style="font-size: 20px;">Judul</th>
</tr>
<tr>
<td align="center" height="210">
<a name="ln" onclick="javascript:document.location.href=fs.options[x].title;" style="cursor: pointer;"> <img height="280" name="show" src="gambar" title="Klik Untuk Detail" width="400" /></a></td>
</tr>
<tr>
<td align="center" height="30">
<select name="slide" onchange="rotate(this.selectedIndex);">
<option title="link" value="gambar1">gambar1</option>
<option title="link" value="gambar2">gambar2</option>
<option title="link" value="gambar3">gambar3</option>
<option title="link" value="gambar4">gambar4</option>
</select> <input onclick="rotate(0);" title="Jump to beginning" type="hidden" value="ll&lt;&lt;" /> <input onclick="rotate(x-1);" title="Last Picture" type="hidden" value="&lt;&lt;" /> <input name="fa" onclick="this.value=((this.value=='Start')?'Stop':'Start');auto();" style="width: 75px;" title="Autoplay" type="hidden" value="Stop" /> <input onclick="rotate(x+1);" title="Next Picture" type="hidden" value="&gt;&gt;" /> <input onclick="rotate(this.form.slide.length-1);" title="Jump to end" type="hidden" value="&gt;&gt;ll" /></td>
</tr>
</tbody>
</table>
</form>


sedikit penjelasan tentang script diatas.Pada bagian select atau combo box disitu ane kasih title yang digunakan untuklink dari gambar yang tampil.sedangkan src digunakan untuk ambil gambar atau alamat url gambar.

ya demikian sedikit tutorial yang saya tulis .semoga bermanfaat.kalau ada saran atau pertanyaan silahkan ,atau ada request lain monggo,...insya allah saya bantu
selamat mencoba

Tidak ada komentar:

Posting Komentar