|
โค้ดภาพไสลด์
<html> <head><title>ทดสอบ JavaScript</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - // เปลี่ยนไฟล์รูปภาพข้างล่างนี้ได้(โดยระบุ URL ของไฟล์รูปภาพ) และสามารถเพิ่มไฟล์รูปภาพที่ต้องการได้อีก เช่น imgsname[3]="ชื่อ URLของไฟล์รูปภาพ" var imgsname = new Array() imgsname[0]="hh.gif" imgsname[1]="hhx.gif" imgsname[2]="jj.gif"
// ข้างล่างนี้เป็นชื่อ URL ที่คุณต้องการให้ลิ้งค์ของแต่ละรูปภาพ เช่น รูปsamplepicA.jpg คือลิ้งค์ของhttp://www.yahoo.com var imgsurl = new Array() imgsurl[0]="http://www.yahoo.com" imgsurl[1]="http://www.altavista.com" imgsurl[2]="http://www.excite.com"
// the target of your links. Accepted values: '_blank', '_self', '_top' // '_parent' or the name of your window var linktarget="_blank"
// กำหนดให้แสดงรูปภาพแต่ละรูป 3 วินาที ( ดูบรรทัดข้างล่าง ซึ่งคุณสามารถเปลี่ยนตัวเลข เพื่อตั้งเวลาได้ครับ) var pause=3
// กำหนดตำแหน่งในแนวนอน (horizontal )โดยระยะห่างของรูปจากขอบหน้าต่าง browserซึ่งกำหนดเป็น pixels เช่น ในตัวอย่างนี้ ใช้เลข 300ให้ดูบรรทัดล่างครับ) var posleft=300
// กำหนดตำแหน่งในแนวตั้ง (vertical )โดยระยะห่างของรูปจากขอบหน้าต่าง browser ซึ่งกำหนดเป็น pixels เช่น ในตัวอย่างนี้ ใช้เลข 20ให้ดูบรรทัดล่างครับ) var postop=20
// ตัวแปรข้างบรรทัดข้างล่างนี้ไม่ต้องแก้ไขครับ var contentimage="" var i_image=0 var i_stepwave=0 var i_maxstepwave=40 var imgpreload=new Array() for (i=0;i<=imgsname.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgsname[i] } pause=pause*1000
function initiate() { contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>" if (document.all) { waveimage.innerHTML=contentimage waveimage.style.posLeft=posleft waveimage.style.posTop=postop enlargewave() } if (document.layers) { document.waveimage.left=posleft document.waveimage.top=postop changeimage() } }
function enlargewave() { if (i_stepwave<=i_maxstepwave) { waveimage.filters.wave.phase=i_stepwave waveimage.filters.wave.strength=i_stepwave waveimage.filters.wave.lightstrength=i_stepwave waveimage.filters.wave.freq=i_stepwave i_stepwave++ var timer=setTimeout("enlargewave()",50) } else { clearTimeout(timer) changeimage() } }
function reducewave() { if (i_stepwave>0) { waveimage.filters.wave.phase=i_stepwave waveimage.filters.wave.strength=i_stepwave waveimage.filters.wave.lightstrength=i_stepwave waveimage.filters.wave.freq=i_stepwave i_stepwave-- var timer=setTimeout("reducewave()",50) } else { clearTimeout(timer) var timer=setTimeout("enlargewave()",pause) } }
function changeimage() { i_image++ if (i_image>=imgsname.length) {i_image=0} contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"
if (document.all) { waveimage.innerHTML=contentimage reducewave() }
if (document.layers) { document.waveimage.document.write(contentimage) document.waveimage.document.close() var timer=setTimeout("changeimage()",pause) }
}
// - End of JavaScript - --> </SCRIPT> </head> <body> <BODY onLoad="initiate()"> <DIV ID="waveimage" style="position:absolute; filter:wave();"> </DIV>
</body> </html> |