Cara Simple Membuat Slide Show Dengan Javascript
Hallo Rekan-rekan, bertemu kembali bersama saya yang akan membahas mengenai Cara Simple Membangun Slide Show Dengan Javascript. Tampilan slide show disini yaitu adalah efek slide show dari gambar yang kita punya agar muncul bergantian. Bagi dapat mengetahui caranya seketika saja kita bikin, yuk ikutin strategi berikut ini.Langkah pertama-tama
Rekan-rekan siapkan beberapa gambar ,kemudian ketikkan code pada file html seperti berikut ini:
index.html
<title>Membangun Slide Show Dengan Javascript</title>
// tambahkan style di img<br>
<style>
img{width: 500px;height: 550px;}
</style>
<body>
<img name=slow>
</body>
tag img disini bagi menampilkan gambar-gambar yang telah disediakan sebelumnya.
Langkah berikutnya yaitu menambhakan script dari javascript seperti dibawah ini:
var g = 0; // nilai awal
var gambar = [];
var waktu = 1000;
// membangun daftar gambar
gambar[0] = 'claude.jpg';
gambar[1] = 'gusion.jpg';
gambar[2] = 'hayabusa.jpg';
gambar[3] = 'karina.jpg';
gambar[4] = 'Natalia.jpg';
// membangun function
function change(){
document.slow.src = gambar[g];
if(g < gambar.length - 1){
g++;
}else{
g = 0;
}
setTimeout(change(), waktu)
}
window.onload = change;
Oke di script diatas terdapat index gambar yang saya punya ada 5 gambar, jadi sesuaikan saja yang telah sobat simpan.
Bila telah simpna file index.html, kemudian jalankan di browser masing-masing dan lihat hasilnya tentu lebih menarik dan gampang.
Demikian pembahasan di artikel ini mengenai Cara Simple Membangun Slide Show Dengan Javascript. Semoga bermanfaat dan semoga dapat memberikan inspirasi bagi explore luas lagi. Hingga jumpa lagi dengan pembahasan lainnya.
terima kasih.
Sumber https://kursuswebsite.org
