การโชว์รูปให้เป็นแบบ slide show โดยใช้ javascript by nandanai

ขั้นแรกเราต้องไปโหลด ไฟล์ .js ที่ชื่อว่า jquery มาก่อน โดยในตัวอย่างนี้จะใช้ jquery-1-4-2.min.js

และในไฟล์ของเราจะเขียนฟังก์ชั่นดังนี้

<script type=”text/javascript”>

var position = 1; // ตำแหน่งของรูปเริ่มต้นว่าจะให้รูปแรกโชว์รูปที่เท่าไร

var count = 3; //จำนวนรูปทั้งหมดที่จะให้โชว์(โชว์ทีละรูปแต่กดเลื่อนไปมา)

function slide_banner(dir) // dir จะเป็นตัวกำหนดว่าเลื่อนไปทางซ้ายหรือขวา( +1 ขวา, -1 ซ้าย)

{

position += dir;

if(position == 0){

position = count;

}

if(position == count+1){

position = 1;

}

$(‘#frame’).stop().animate({marginLeft:-(615*(position-1))+’px’}, 1000); //frame คือ id ของ div ที่ครอบรูปทั้งหมดไว้โดยเลข 615 นั่นคือความกว้างของ div ที่มีรูปหนึ่งรูปนั่นเอง(div ที่อยู่ใน div ที่ครอปรูปทั้งหมด) และเลข 1000 คือเวลาที่ใช้ในการทำ animation จนเสร็จ(ms)

}

</script>

และในไฟล์ .css ของเราจะเป็น

.frame{

height: 76px;

width: 300%; //จำนวน % จะคิดจากจำนวนรูปทั้งหมด x100 ซึ่งในตัวอย่างคือ 3 รูป

}

.frame .image{

height: 76px;

width: 615px;

float: left;

}