[Slide Easy...] ช่วยท่านได้ แถมคลิกภาพเพื่อไปยังลิ้งก์ต่างๆได้ด้วย เหมาะแก่การนำปลั๊กอินตัวนี้ไปทำ สไลด์โชว์สินค้า หรือโปรโมชั่น หรืออะไรนอกเหนือจากนี้ที่ท่านเห็นสมควร หรือจะทำแค่เพื่อความสวยงาม ก็ยังได้ ไม่ผิดผีแต่ประการใด ลองชมตัวอย่างก่อนละกัน ซึ่งโค้ดตัวนี้เซตค่าให้แสดงได้ 2 แบบ
Live Demo:ว่าแล้วก็มาดูวิธีการใช้งานกันครับ
1. ดาวน์โหลด โค้ดมาก่อน
ขออภัย! ส่วนนี้สงวนไว้เฉพาะสมาชิกเท่านั้น กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน2. เริ่มเขียนโค้ดกัน include ไฟล์ js และ css ที่จำเป็นเข้ามา ในส่วน head
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
จากนั้นเขียนโครงสร้าง html ของ slide ซึ่งเป็นโครงสร้างง่ายมากๆ 1 li จะเท่ากับ 1 slide
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
ขั้นตอนสุดท้าย เขียน javascript แปลงโครงสร้าง html ให้เป็น slide อันตระการตา
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
auto : คือให้ slide ของเราเลื่อนเองอัตโนมัติ
conti
nuous : คือ ให้เลื่อนไปเรื่อยๆ เมื่อแสดงไปถึงอันสุดท้ายก็ให้วนไป อันที่ 1 ต่อ วันไปอย่างนี้
มันยังมีค่า options ให้ท่านเลือกเซตอีกเพียบที่นี่ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider ไม่ว่าจะเป็นการกำหนดความเร็วในการแสดงสไลด์แต่ละอัน หรือกำหนดค่าหน่วงเวลาก่อนที่จะแสดงไสลด์อันถัดไป
โค้ดทั้งหมดจะเป็นดังนี้<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Easy Slider jQuery Plugin Demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
</body>
</html>
สิ่งหนึ่งที่ต้องจำไว้ก็คือว่า เมื่อท่านนำไปใช้งานจริง อาจจะต้องมีการปรับแต่ง css ใน css/screen.css
ข้อมูลเพิ่มเติม : http://cssglobe.com
เรียบเรียง และเครดิตจาก : http://www.select2web.com/jquery/jquery-easy-slider.html
ลิงค์หัวข้อ:
http://dexmore.com/topic/398 
หน้า: 1 
Powered by 