Freecode
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

รูปเลื่อนไปเรื่อยๆ

สคริปต์นี้ จะแสดงรูปประมาณ 4 รูป(เพิ่มได้) โดยรูปจะเลื่อนไปเรื่อยๆ ครับ

 

 

 

ความรู้ที่ใช้ใน Script นี้

:: How to Build ::
  1. มาดูคอนเซปต์กันก่อน วิธีที่ผมใช้ก็คือ สร้าง Layer ซ้อนกันขึ้นมา แล้วกำหนดขอบเขตของเลเยอร์ชั้นนอกไว้ พอเราเลื่อนเลเยอร์ชั้นใน ซึ่งผมใส่ภาพเอาไว้ ส่วนที่เกินขอบไปก็จะมองไม่เห็น ผลลัพธ์ก็จะออกมาอย่างที่เห็น

  2. การวางเลเยอร์ ต้องวางแท็ก <DIV> ซ้อนกัน 2 ชั้น และกำหนดขอบเขตด้วยการคลิปเลเยอร์ ที่ชั้นนอก คุณต้องกำหนดความกว้างความสูงตามที่ต้องการ ขนาดที่กำหนดในส่วนนี้เป็นขนาดที่จะให้ผู้ใช้มองเห็น ส่วนชั้นใน คุณต้องวาง รูปภาพเป็นลำดับไว้ 2 รอบ เพื่อให้การเลื่อนเป็นลูปทำได้อย่างต่อเนื่อง ดังนั้น ขนาดของมันจึงต้อง กว้างเป็น 2 เท่าของเลเยอร์ชั้นนอก <STYLE TYPE="text/css"> <!-- #grob { position:absolute; width:200; height:50; clip:rect(0,200,50,0); background-color:#C0C0C0; layer-background-color:#C0C0C0; } #piclist { position:absolute; left:-200; top:0; width:400; height:50; clip:rect(0,400,50,0); background-color:#000000; layer-background-color:#000000; } --> </STYLE> <DIV ID="grob"> <DIV ID="piclist"> <nobr> <img src="scroll_pic1.gif"> <img src="scroll_pic2.gif"> <img src="scroll_pic3.gif"> <img src="scroll_pic4.gif"> <img src="scroll_pic1.gif"> <img src="scroll_pic2.gif"> <img src="scroll_pic3.gif"> <img src="scroll_pic4.gif"> </nobr></DIV> </DIV>
  3. ในส่วนสคริปต์ (ใน <HEAD>) จะต้องมีการตรวจสอบเบราเซอร์ก่อน เพราะแต่ละบราวเซอร์มีวิธีเขียนไม่เหมือนกัน ns4 = (document.layers)? true:false ie4 = (document.all)? true:false
  4. ประกาศฟังก์ชั่น moveTo() เอาไว้เลื่อนเลเยอร์ function moveTo(obj,x,y) { obj.left = x; obj.top = y; }
  5. ประกาศฟังก์ชั่นนี้เป็นฟังก์ชั่นหลักของโปรแกรมครับ ตัวแปร moveVar เป็นตำแหน่งของเลเยอร์ ฟังก์ชั่นนี้จะเพิ่มค่าตัวแปร moveVar แล้วเลื่อนเลเยอร์ไป จนตัวแปรนี้มีค่าถึง 0 ก็จะ reset ค่าไปที่ -200 อาจจะดูแปลกๆที่ค่าเริ่มต้นเป็น -200 ใช่ไหมครับ ลองคิดดู ถ้าผมตั้งค่าให้เริ่มจาก 0 อะไรจะเกิดขึ้น เวลาภาพเลื่อนไป มันจะมีช่องว่างออกมา ดังนั้นผมจึงต้องเรียงภาพไว้ 2 รอบแล้วกำหนดตำแหน่งเริ่มต้นให้เหลื่อมไปทางซ้าย 1 รอบ ไงครับ ในตัวอย่างนี้ผมใช้ภาพทั้งหมด 4 ภาพ ภาพหนึ่งกว้าง 50 pixels ดังนั้น จึงต้องตั้งค่าให้เหลื่อมไปทางซ้าย 5x40 = -200 pixels ครับ เวลาคุณเอาสคริปต์นี้ไปใช้ ต้องแก้ค่านี้ตามความกว้างที่คุณต้องการด้วยนะครับ function slide() { moveVar++; if (moveVar==0) {moveVar=-200} moveTo(listPtr,moveVar,0); }
  6. ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดตัวแปรพ้อยเตอร์ให้ชี้ไปที่ เลเยอร์อย่างถูกต้อง ตามชนิดของ Browser และกำหนดค่าเริ่มต้นเป็น -200 แล้วสั่งให้ฟังก์ชั่น slide() ทำงานทุกๆ 0.1 วินาที function start() { if (ns4) {listPtr = document.grob.document.piclist;} if (ie4) {listPtr = piclist.style;} moveVar=-200; slideplay=setInterval('slide()',100); }

Back to top





© copyright 2001 Sorrawut Korsuwansiri