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> |
Direct link: https://paste.plurk.com/show/275288