Javascript ini akan menghasilkan kesan paparan slaid gambar secara rawak. Ia berlainan dengan jawascript yang biasa digunakan iaitu susunan pertukarannya adalah mengikut turutan. Tetapi ini secara rawak.

Arahan:

Masukkan kod te rsebut di dalam <BODY> laman web anda.

<script language="javascript">

var delay=1000 //set jurang masa dalam miliseconds
var curindex=0

var randomimages=new Array()

    randomimages[0]="1.jpg"
    randomimages[1]="5.jpg"
    randomimages[2]="2.jpg"
    randomimages[3]="4.jpg"
    randomimages[4]="3.jpg"
    randomimages[5]="6.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="https://www.drupalnote.my/%27%2Brandomimages%5BMath.floor%28Math.random%28%29%2A%28randomimages.length%29%29%5D%2B%27">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

Pengubahsuaian:

randomimages[0]="1.jpg"

  • masukkan nama-nama gambar yang ingin anda tukarkan.
  • pastikan [0],[1],[2] ... [10] adalah mengikut array susunan untuk gambar anda

** Tinggalkan komen di bawah sekiranya anda mempunyai persoalan

Penilaian: 
3
Your rating: None Average: 3 (2 votes)

Komen

iezqandar's picture

Salam, erm boleh x trangkan ttg "miliseconds" camne nak kira? milisecond = second??

parasolx's picture
Admin

1 sec = 1000 milisecond

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

sno0p's picture

Salam,
Saya nak tanya.Apa yang saya faham tentang coding ni..

var randomimages=new Array()

randomimages[0]="1.jpg"
randomimages[1]="5.jpg"
randomimages[2]="2.jpg"
randomimages[3]="4.jpg"
randomimages[4]="3.jpg"
randomimages[5]="6.jpg"

Ia bermaksud 6 gambar jela kan?Saya nak tanya kalau gambar kita ada sampai 50 keping misalnya.Adakah kita perlu tulis kat array sampai randomimages[50]="50.jpg" ??

Atau ada cara lain untuk itu?
Maaf kalau pertanyaan saya silap.Harap ditegur.Terima Kasih

parasolx's picture
Admin

yea snoop.. mmg betul.. kena buat array tuh sampai berapa nilai kita nak la.. kalu 50, kena buat sampai randomimages[50]..
tapi kena perhatikan betol2, sbb array ni dia start dari 0.. jadi kalu 50 image sepatutnye array dia sampai 49 sahaja.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

sno0p's picture

o0oo..macam tu....
xdela...sno0p ingatkan ada cara lain lagi...
hehehe...
thanz atas penerangan para....:D

nurulkhatijah's picture

Salam..sy masih baru dlm javascript dan web design..macam mana sy nak masuk gmbr yang bergerak secara rawak ke dalam table html yang saya sudah buat?

parasolx's picture
Admin

senang sahaja khatijah, copy semua coding tersebut.. kemudian paste kan pada kedudukan dalam table dimana saudari mahu dia berada.

sama da dalam cell mana. kemudian ubahsuai coding tersebut mengikut tutorial yang telah saya berikan supaya target image2 tersebut dapat dicapai oleh script ini. jika target salah, maka image tersebut tidak akan keluar.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

saya krg jelas ttg sumber/lokasi gambar. kalau gambar tu duduk di dlm folder images (drupal) - nk buat mcmana?

parasolx's picture
Admin

script ini berdasarkan kepada custom html page. kalu nak digunakan dalam drupal, kita kena pastikan lokasi images yang kita muatkan.

tapi kita boleh letakkan "./" dihadapan URL setiap images supaya dia akan mengambil root drupal folder sebagai permulaan.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

mcm ni ke?

/sites/default/files/images/image_1.jpg

atau

/http://agensizaman.com/sites/default/files/images/image_1.jpg

parasolx's picture
Admin

./sites/default/files/images/images_1.jpg

jika nak jadikan alamat URL tersebut lebih pendek, hasilkan satu folder dalam root Drupal. katakan nama "slideshow". jadi kita boleh tempatkan semua images di dalam folder tersebut. dan target URL akan jadi seperti:

./slideshow/image01.jpg

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

saya pastekan code tsbt dlm 'source' (new page content)dan url tu dah buat spt disuruh tapi image tak kluar.

utk drupal kita tak perlukan masukan &

parasolx's picture
Admin

input filter guna ape? full html ke atau filtered html?

jika boleh gunakan input filter "PHP Code" kalu melibatkan penggunaan kod-kod dalam content drupal.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

asal guna full html. bila tukar ke filtered html - bila paparan dia kluar kod tsbt.

p/s: mcaman nk guna "PHP Code" sb dlm input format hanya ada dua pilihan shj iaitu full html & filtered html ?

parasolx's picture
Admin

pergi ke Administer > Content management > Modules. Cari modul yang bernama PHP Code. Aktifkan modul tersebut. Nanti akan keluar satu lagi input filter.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

ok dah jadik ! tqvm

zailir's picture

bagaimana nak ejas kod supaya setiap image tersebut boleh di click & seterusnya link ke laman lain?

parasolx's picture
Admin

yang ini kena buat modifikasi kod yang banyak kepada kod yang sedia ada. sebab sekarang dia hanya buat randomize kepada path image sahaja.

untuk menjadikan dia ada URL, kita kena ubah kod ini untuk mengambil array atau argument berdasarkan kepada satu line kod image dan URL. seeloknya kena guna kod script yang berbeza. mungkin saya akan muatkan dalam tutorial akan datang.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training

zailir's picture

akan ada tutorial!, bagus tu...tq

p/s:paparan gambar rawak sebenarnya sesuai dipakai utk tujuan apa?

parasolx's picture
Admin

salam, saya sudah muatkan tutorial untuk gambar rawak dengan pautan dalam portal: http://kripkornstudios.com.my/paparan-rawak-gambar-bersama-pautan. tujuan paparan gambar rawak (random images) selalunya untuk menambahkan mood laman web dgn animasi berbanding laman yang statik.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training