Select Language



Followers

IT Programmer. Powered by Blogger.

10 March 2012

Membuat Slideshow dengan Javascript

"Om Swastyastu"

Membuat Slideshow dengan Javascript
Biasanya, jika kalian membuat sebuah slideshow, ada banyak framework dari JQuery yang bisa kalian pakai. Namun kali ini kondisinya berbeda, kalian harus membuat sebuah slideshow yang murni dengan javascript tanpa menggunakan JQuery. Bisakah? Kondisi seperti ini pernah saya hadapi ketika dosen meminta untuk membuat suatu website dengan gallery yang menampilkan slideshow, tetapi tidak diijinkan menggunakan framework JQuery. Lalu bagaimana caranya membuat slideshow?

Kita bisa menggunakan fungsi setTimeout() dalam javascript. Selain itu ada beberapa kondisi dalam slideshow kali ini. Contohnya, slideshow harus dapat berjalan misal tiap 5 detik akan berganti gambar. Ketika slide tiba digambar terakhir, maka setelah itu akan kembali ke gambar pertama.

Pertama, Untuk memuat suatu image, pada Javascript terdapat objek Image. Untuk membuat
objek tersebut pendeklarasiannya adalah sebagai berikut :
img1 = new Image ()
img1.src = "pic1.gif"
arti dari script di atas adalah membuat objek image dengan isinya adalah image pic1.gif.

Selanjutnya buat file .html menggunakan web editor kalian lalu copy code berikut, kemudian simpan dengan nama file sesuai ke inginan kalian,
img1 = new Image ()
   <html> 
  <head> 
  <script language="javascript"> 
  <!-- 
  var image1=new Image() 
  image1.src="1.gif" 
  var image2=new Image() 
  image2.src="2.gif" 
  var image3=new Image() 
  image3.src="3.gif" 
  //--> 
  </script> 
  </head> 
  <body> 
  <center> 
  <h2>IT Programmer SlideShow</H2><hr size=5 
  color="black"> 
  <img src="1.gif" name="slide" width="100" height="100"> 
  <script> 
  <!-- 
  //variable yang akan menaikan hitungan gambar 
  var step=1 
function slideit(){ 
//jika browser tidak mendukung metode dokumen.image maka keluar. 
  if (!document.images) 
  return 
  document.images.slide.src=eval("image"+step+".src") 
  if (step<3) 
  step++ 
  else 
  step=1 
  //memanggil function "slideit()" setiap 5 detik 
  setTimeout("slideit()",5000) 
  } 
  slideit() 
  //--> 
  </script> 
  <hr size=5 color="black"> 
  </body> 
</html> 
INGAT sesuaikan nama file image kalian dan letakan pada folder yang sama dengan file .html.

Contoh Slideshow bisa kalian lihat di www.creanivate.com. namun yang ini menggunakan JQuery.
Sekian cara membuat Slideshow dengan javascript dari IT Programmer. Semoga bermanfaat. :)

"Om Santhi, Santhi, Santhi, Om"



Comments:

Ada 3 comments pada “Membuat Slideshow dengan Javascript”
Jaka Zulham said...
pada hari 

cara pakai jquery gimana??

IT Programmer said...
pada hari 

untuk slideshow dengan JQuery anda bisa lihat disini.. slideshow jquery

Meo^^nk said...
pada hari 

bisa ditambah caption gambar ngga?

Social Media


Facebook Page

Programming Tutorial


Info


Tips
Downloads
Friends
 
This Blog is proudly powered by Blogger.com | Template by Bali Web Development | Privacy Policy | Rise Up!!