Thaimisc.com : การทำเมนู Content แบบสไลด์
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
การทำเมนู Content แบบสไลด์
เขียนโดย Poj , 23-11-2006
เมนูแบบนี้คงเคยเห็นกันในหลายๆเว็บนะครับ
วันนี้ผมจะมาแนะนำการทำเมนู Content แบบสไลด์ เมนูแบบนี้มีประโยชน์มากครับสำหรับเว็บที่มีเนื้อหามากๆ
ถ้ายังนึกภาพกันไม่ออก ลองดูตัวอย่างได้ ที่นี่ ครับ

ก่อนอื่นให้ดาวน์โหลดไฟล์สามไฟล์นี้มาก่อน (คลิกขวาที่ไฟล์แล้วเลือก Save As) แล้วนำไปใส่ไว้ในโฟลเดอร์ที่ต้องการ

1. contentslider.css
2. contentslider.js
3. loading.gif


1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<div id="slider1" class="contentslide">

<div class="contentdiv">
Content 1
</div>

<div class="contentdiv">
Content 2
</div>

<div class="contentdiv">
Content 3
</div>

</div>

<div class="pagination" id="paginate-slider1"></div>

<script type="text/javascript">
//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds

</script>



3.เราสามารถแก้ไขโค้ดที่นำไปใส่ไว้ใน <body>....</body> ให้ตัวเมนู content สลับเมนูได้เอง โดยกำหนดเวลาที่ดีเลย์ระหว่างเมนูได้

<script type="text/javascript">
กำหนดเป็น ContentSlider("slider1")
หรือแบบนี้ ContentSlider("slider1", 3000)
ตัวเลข 3000 คือเวลาที่ดีเลย์ระหว่างเมนูแต่ละอัน 1000 เท่ากับ 1 วินาที

</script>



Credit : dynamicdrive

<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com