1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
/* parameter untuk menjalankan fungsi openContent ini adalah
1. Element trigger (link) yang akan membuka content apabila di click
2. Id dari content yang akan ditampilkan
*/
/* Update 08 Maret 2009
-> Slideshow diberikan animasi otomatis berpindah-pindah content
*/
// siapkan variable timer yang akan menyimpan fungsi animasi
var timer = null;
function openContent(trigger,divID){
// semua link pada div dengan id='divTrigger' akan di setarakan style-nya menjadi style normal
$('#divTrigger a').each(
function(){
$(this).css({'background-color':'#FFF','color':'#000'});
}
);
// semua div di dalam element dengan id='divContent' disembunyikan
$('#divContent div').hide();

// div yang akan ditampilkan diberi efek fadeIn (built-in dari JQuery) ketika ditampilkan
$('#'+divID).fadeIn('slow');

// link menjadi trigger diberi style berbeda dengan link lainnya agar dapat diketahui content nomor berapa yang sedang aktif
$(trigger).css({'background-color':'#00A','color':'#FFF'});

// Update 08 Maret 2009
// timer di set
if(timer != null) clearTimeout(timer);
timer = setTimeout(
function(){
/* Cek terlebih dahulu apakah link yang sedang di-click saat ini ada link lagi setelah itu
apabila tidak ada link lagi setelah element yang sedang di-click maka pilih element link pertama
dengan selector ':first' dari jquery. Setelah sudah ditentukan link, maka lakukan event click
pada link tersebut. Setiap link yang di click akan menjalankan fungsi ini sehingga terjadi animasi
perpindahan content slideshow.
*/
var nextAnchor = ($(trigger).next('a').text() == '') ? $('#divTrigger a:first') : $(trigger).next('a');
nextAnchor.click();
}, 3000 // 3 detik waktu perpindahan content
);
}
$(document).ready(
function(){
// untuk permulaan, tampilkan content nomor pertama '#firstSlide' adalah id dari trigger yang akan membuka content nomor pertama
openContent($('#firstSlide'),'div1');
}
)
</script>
</head>
<body>

<div id="divTrigger">
<a href="javascript:;" onClick="openContent(this,'div1')" id="firstSlide">1</a>
<a href="javascript:;" onClick="openContent(this,'div2')">2</a>
<a href="javascript:;" onClick="openContent(this,'div3')">3</a>
<a href="javascript:;" onClick="openContent(this,'div4')">4</a>
</div>

<div id="divContent">
<div id="div1">
<span class="title">Pemandangan Pantai</span>
<img src="slideshow/images/img1.jpg" align="left" /> Pemandangan pantai memang menakjubkan, dengan berdiam diri sejenak dan
melihat pemandangan pantai niscaya kita akan mendapatkan kedamaian jiwa.
</div>
<div id="div2">
<span class="title">Dua Pinguin</span>
<img src="slideshow/images/img2.jpg" align="left" /> Pinguin adalah spesies makhluk hidup yang langka dan hanya terdapat pada
benua tertentu di bumi ini. Oleh karena itu kita penduduk dunia harus melestarikannya.
</div>
<div id="div3">
<span class="title">Pepohonan Sejuk</span>
<img src="slideshow/images/img3.jpg" align="left" /> Ini adalah gambar wallpaper pilihan saya ketika sedang bekerja, dengan
melihat gambar ini hati terasa menjadi lebih tenang.
</div>
<div id="div4">
<span class="title">Hujan Sakura</span>
<img src="slideshow/images/img4.jpg" align="left" /> Menikmati bunga sakura bagi warga jepang adalah tradisi musiman yang
menyenangkan pada saat memasuki musim dingin.
</div>
</div>