web: แสดงรูปแบบสุ่ม
Submitted by wd on Wed, 2006-08-30 15:28
Topic:
เอาโค๊ดมาจาก http://javascript.internet.com
หลักการคือใช้ฟังก์ชั่น setTimeout ของจาวาสคริปต์ ในการหมุนภาพแบบสุ่ม
โค๊ดมีดังนี้
<script language="JavaScript"> <!-- Original: Robert Bui (astrogate@hotmail.com) --> <!-- Web Site: http://astrogate.virtualave.net --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin // ***** CHANGE TIMING HERE var interval = 10; var random_display = 1; // 0 = no, 1 = yes interval *= 1000; var image_index = 0; image_list = new Array(); // ***** INSERT IMAGE LIST HERE image_list[image_index++] = new imageItem("http://www.palapanyo.com/gal/random/w150/chwesigon.jpg"); image_list[image_index++] = new imageItem("http://www.palapanyo.com/gal/random/w150/chwedagon.jpg"); image_list[image_index++] = new imageItem("http://www.palapanyo.com/gal/random/w150/chaitiyo.jpg"); // END IMAGE LIST var number_of_image = image_list.length; // End --> function imageItem(image_location) { this.image_item = new Image(); this.image_item.src = image_location; } function get_ImageItemLocation(imageObj) { return(imageObj.image_item.src) } function generate(x, y) { var range = y - x + 1; return Math.floor(Math.random() * range) + x; } function getNextImage() { if (random_display) { image_index = generate(0, number_of_image-1); } else { image_index = (image_index+1) % number_of_image; } var new_image = get_ImageItemLocation(image_list[image_index]); return(new_image); } function rotateImage(place) { var divId = 'divgalid'; var divbg = document.getElementById(divId); var imageId = 'imggalid'; var image = document.getElementById(imageId); // make new image var new_image = getNextImage(); document[place].src = new_image; var recur_call = "rotateImage('"+place+"')"; setTimeout(recur_call, interval); } </script> <script> rotateImage('rImage'); </script>
ตรงที่จะแทรกโค๊ดใช้ html ดังนี้
<div id="divgalid" style="width: 200px; height: 230px; text-align: center; float: right; background: #eee;"> <img name="rImage" src="http://www.palapanyo.com/gal/random/w150/chaitiyo.jpg" id="imggalid" /> </div>
Recent comments