การโชว์รูปให้เป็นแบบ slide show โดยใช้ javascript by nandanai
Sep0
ขั้นแรกเราต้องไปโหลด ไฟล์ .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;
}
Enjoy this article?
Consider subscribing to our RSS feed!
ไม่มีความเห็น
ยังไม่มีความเห็น