Cerita Yang Jarang Terkini :

Jimat Ruang Entri Menggunakan JavaScript

Empayar Utama - Tuesday, January 23, 2018 : No comments

Kali ini aku cuba kongsi pemasangan slide dalam entri dengan guna hanya satu simple javascript sahaja; tidak seperti kebiasaan dimana kita guna satu jQuery script dan satu javascript untuk buat slide.

Oleh kerana ianya basic, hanya slide bergambar yang dapat kita tunjukkan. Tapi memang tidak rumit.

Apa yang perlu hanya tukar masa slide (lihat kod (timeOut) warna hijau); saiz imej ikur kesesuaian sendiri (lihat kod warna merah); serta bilangan imej yang ingin dipos (lihat kod warna biru yang ditebalkan).

Untuk mencuba, ambik kod kat bawah :

<div style="text-align: center;">
<script type="text/javascript">
var image1=new Image()
image1.src="imej pertama"
var image2=new Image()
image2.src="imej kedua"
var image3=new Image()
image3.src="imej ketiga"
//</script>

<img height="350" name="slide" src="imej pertama" width="350" />

<script>
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",1500)
}
slideit()
</script>

</div>

Contoh slide (24 gambar) :


Haaa cubalah...