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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<head>
<title>SlideShow Example</title>
<style>
#divTrigger a:link,#divTrigger a:visited{
text-decoration: none; /* hilangkan garis bawah pada link */
margin:4px 0px; /* memberi jarak antar link */
padding: 1px 4px; /* menjadikan link seperti kotak */
border: 1px solid #CCC;
background-color: #FFF;
color: #000;
}
/* link yang dilalui oleh mouse dan element dengan class='selected' akan mempunyai efek yang sama */
#divTrigger a:hover,#divTrigger a:active,.selected{
background-color: #00A;
color: #FFF;
}
#divContent{
margin-top:4px;
border:1px solid #CCC;
width: 300px;
height: 220px;
padding: 4px;
}
#divContent div{
/* semua div di dalam element dengan id='divContent' akan di sembunyikan sementara */
display:none
}
.title{
font-size: 16px;
font-weight: bold;
color: #006;
text-decoration: underline;
margin-bottom: 2px;
display:block
}
</style>
<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>

</body>
</html>