Cara Simple Membuat Slide Show Dengan Javascript

Hallo Sahabat, bertemu kembali bersama saya yang akan membahas tentang Cara Simple Membuat Slide Show Dengan Javascript. Tampilan slide show disini adalah merupakan efek slide show dari gambar yang kita punya agar muncul bergantian. Untuk dapat mengetahui caranya langsung saja kita buat, yuk ikutin langkah-langkah berikut ini.Langkah pertama

Sahabat siapkan beberapa gambar ,kemudian ketikkan code dalam file html seperti berikut ini:

index.html

	<title>Membuat Slide Show Dengan Javascript</title>
	// tambahkan style pada img<br>        
<style>
	img{width: 500px;height: 550px;}
</style>
<body>
	<img name="slow">
</body>

tag img disini untuk menampilkan gambar-gambar yang sudah disiapkan sebelumnya.

Langkah selanjutnya adalah menambhakan script dari javascript seperti dibawah ini:

var g = 0; // nilai awal
		var gambar = [];
		var waktu = 1000;

		// membuat daftar gambar
		gambar[0] = 'claude.jpg';
		gambar[1] = 'gusion.jpg';
		gambar[2] = 'hayabusa.jpg';
		gambar[3] = 'karina.jpg';
		gambar[4] = 'Natalia.jpg';

		// membuat function
		function change(){
			document.slow.src = gambar[g];
			if(g < gambar.length - 1){
				g++;
			}else{
				g = 0;
			}
			setTimeout("change()", waktu)
		}
		window.onload = change;

Oke pada script diatas terdapat index gambar yang saya punya ada 5 gambar, jadi sesuaikan saja yang sudah sahabat simpan.

Jika sudah simpna file index.html, kemudian jalankan pada browser masing-masing dan lihat hasilnya tentu lebih menarik dan mudah.

Demikian pembahasan pada artikel ini tentang Cara Simple Membuat Slide Show Dengan Javascript. Semoga bermanfaat dan semoga dapat memberikan inspirasi untuk explore luas lagi. Sampai jumpa lagi dengan pembahasan lainnya.

terima kasih.