:: How to Build ::
- มาดูคอนเซปต์กันก่อน วิธีที่ผมใช้ก็คือ สร้าง Layer ซ้อนกันขึ้นมา แล้วกำหนดขอบเขตของเลเยอร์ชั้นนอกไว้
พอเราเลื่อนเลเยอร์ชั้นใน ซึ่งผมใส่ภาพเอาไว้ ส่วนที่เกินขอบไปก็จะมองไม่เห็น ผลลัพธ์ก็จะออกมาอย่างที่เห็น
- การวางเลเยอร์ ต้องวางแท็ก <DIV> ซ้อนกัน 2 ชั้น และกำหนดขอบเขตด้วยการคลิปเลเยอร์
ที่ชั้นนอก คุณต้องกำหนดความกว้างความสูงตามที่ต้องการ ขนาดที่กำหนดในส่วนนี้เป็นขนาดที่จะให้ผู้ใช้มองเห็น
ส่วนชั้นใน คุณต้องวาง รูปภาพเป็นลำดับไว้ 2 รอบ เพื่อให้การเลื่อนเป็นลูปทำได้อย่างต่อเนื่อง ดังนั้น ขนาดของมันจึงต้อง
กว้างเป็น 2 เท่าของเลเยอร์ชั้นนอก
<![CDATA[
<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>
]]>
- ในส่วนสคริปต์ (ใน <HEAD>) จะต้องมีการตรวจสอบเบราเซอร์ก่อน เพราะแต่ละบราวเซอร์มีวิธีเขียนไม่เหมือนกัน
<![CDATA[
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
]]>
- ประกาศฟังก์ชั่น moveTo() เอาไว้เลื่อนเลเยอร์
<![CDATA[
function moveTo(obj,x,y)
{
obj.left = x;
obj.top = y;
}
]]>
- ประกาศฟังก์ชั่นนี้เป็นฟังก์ชั่นหลักของโปรแกรมครับ ตัวแปร moveVar เป็นตำแหน่งของเลเยอร์
ฟังก์ชั่นนี้จะเพิ่มค่าตัวแปร moveVar แล้วเลื่อนเลเยอร์ไป จนตัวแปรนี้มีค่าถึง 0 ก็จะ reset ค่าไปที่ -200
อาจจะดูแปลกๆที่ค่าเริ่มต้นเป็น -200 ใช่ไหมครับ ลองคิดดู ถ้าผมตั้งค่าให้เริ่มจาก 0 อะไรจะเกิดขึ้น
เวลาภาพเลื่อนไป มันจะมีช่องว่างออกมา ดังนั้นผมจึงต้องเรียงภาพไว้ 2 รอบแล้วกำหนดตำแหน่งเริ่มต้นให้เหลื่อมไปทางซ้าย 1 รอบ ไงครับ ในตัวอย่างนี้ผมใช้ภาพทั้งหมด 4 ภาพ ภาพหนึ่งกว้าง 50 pixels ดังนั้น จึงต้องตั้งค่าให้เหลื่อมไปทางซ้าย 5x40 = -200 pixels ครับ เวลาคุณเอาสคริปต์นี้ไปใช้ ต้องแก้ค่านี้ตามความกว้างที่คุณต้องการด้วยนะครับ
<![CDATA[
function slide()
{
moveVar++;
if (moveVar==0) {moveVar=-200}
moveTo(listPtr,moveVar,0);
}
]]>
- ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้สคริปต์เริ่มทำงาน มันจะกำหนดตัวแปรพ้อยเตอร์ให้ชี้ไปที่ เลเยอร์อย่างถูกต้อง
ตามชนิดของ Browser และกำหนดค่าเริ่มต้นเป็น -200 แล้วสั่งให้ฟังก์ชั่น slide() ทำงานทุกๆ 0.1 วินาที
<![CDATA[
function start()
{
if (ns4) {listPtr = document.grob.document.piclist;}
if (ie4) {listPtr = piclist.style;}
moveVar=-200;
slideplay=setInterval('slide()',100);
}
]]>
|
