S3slide ภาพเลื่อนสุดขอบโลก

  • วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
  • Comments

ภาพไม่เกี่ยวข้องกับบทความ

วันนี้ผมจะมานำเสนอ slide show หรือจะเรียกว่าภาพเลื่อนๆ ก็แล้วแต่ สคริปต์ตัวนี้เป็น jquery plugin ลองดู

Live Demo

ถ้าชอบตามมาดูวิธีทำกันเลยครับ

1. ก่อนอื่นก็ต้อง ดาวน์โหลด สิ่งที่จำเป็นกันก่อน หลังจากดาวน์โหลดมาแล้วให้แตกซิปออก จริงๆในโฟลเดอร์ผมได้ใส่ตัวอย่างการใช้งานแล้วไว้ล่ะ ท่านสามารถศึกษาจากตัวนั้นก็ได้

2. เริ่มเขียนโค้ด include jquery กับ s3slide เข้ามา

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>

3. include css เข้ามา

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

4. โครงสร้าง html

<div id="s3slider">
  <ul id="s3sliderContent">
 
    <!-- Slide 1 begin -->
    <li class="s3sliderImage"> <img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_xjxVw3KI/AAAAAAAACgk/1yfN4MGBcs4/s800/WALLPAPER_0514.jpg" /> <span class="top">ใส่ข้อความเข้าไปตรงนี้</span> </li>
    <!-- Slide 1 end -->
 
    <!-- Slide 2 begin -->
    <li class="s3sliderImage"> <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_xkao54wI/AAAAAAAACgo/2wyH63Yw3X0/s800/WALLPAPER_0506.jpg" /> <span class="right">ใส่ข้อความเข้าไปตรงนี้</span> </li>
    <!-- Slide 2 end -->
 
    <div class="clear s3sliderImage"></div>
  </ul>
</div>

ผมคอมเม้นท์ ส่วนที่เป็นตัว slide ไว้แล้ว ถ้าต้องการเพิ่ม slide เยอะๆก็ก้อปปี้แล้ววางเอาครับ แล้วก็เปลี่ยนรูปภาพ กับข้อความเอา

<span class="right">ใส่ข้อความเข้าไปตรงนี้</span>

class จะเป็นตัวกำหนดตำแหน่งแสดง ข้อความ ซึ่งมีค่าเป็นไปได้คือ top , bottom , left , right

5. เขียนโค้ดสร้าง slide ตัวเลขตรง timeOut ถ้าต้องการให้ภาพเลื่อนเร็วขึ้นก็ ใช้ค่าตัวเลขน้อยๆ ถ้าต้องการช้างๆ ก็ตัวเลขมากๆ

<script type="text/javascript">
$(document).ready(function() {
   $('#s3slider').s3Slider({ timeOut: 4000 });
}); 
</script>

โค้ดทั้งหมด

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
 
<link rel="stylesheet" type="text/css" href="css/style.css" />
 
<script type="text/javascript">
$(document).ready(function() {
   $('#s3slider').s3Slider({ timeOut: 4000 });
}); 
</script>
<title>S3slide</title>
</head>
<body>
<div id="s3slider">
  <ul id="s3sliderContent">
 
    <!-- Slide 1 begin -->
    <li class="s3sliderImage"> <img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_xjxVw3KI/AAAAAAAACgk/1yfN4MGBcs4/s800/WALLPAPER_0514.jpg" /> <span class="top">ใส่ข้อความเข้าไปตรงนี้</span> </li>
    <!-- Slide 1 end -->
 
    <!-- Slide 2 begin -->
    <li class="s3sliderImage"> <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_xkao54wI/AAAAAAAACgo/2wyH63Yw3X0/s800/WALLPAPER_0506.jpg" /> <span class="right">ใส่ข้อความเข้าไปตรงนี้</span> </li>
    <!-- Slide 2 end -->
 
    <div class="clear s3sliderImage"></div>
  </ul>
</div>
</body>
</html>

การปรับแต่ง

ในกรณีที่ท่านใช้ภาพไม่เท่ากับในตัวอย่างของ ท่านจะต้องปรับแต่ง css เล็กน้อย ให้เปิดไฟล์ /css/style.css ขึ้นมา

ตำแหน่ง ที่ 1 ที่จะ้ต้องปรับแต่ง

#s3slider {
   width: 640px; /* กำหนดให้ความกว้างเท่ากับความกว้างของภาพที่จะใช้ */
   height: 480px; /* กำหนดให้ความสูงเท่ากับความสูงของภาพที่จะใช้  */
}

ตำแหน่ง ที่ 2 ที่จะ้ต้องปรับแต่ง

#s3sliderContent {
   width: 640px; /* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}

ตำแหน่ง ที่ 3 ที่จะ้ต้องปรับแต่ง

.s3sliderImage span {
   width: 640px; /* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}

ตำแหน่ง ที่ 4 ที่จะ้ต้องปรับแต่ง ส่วนนี้จะเป็นส่วนสำหรับกำหนด แถบแสดงตัวหนังสือใน slide

.s3sliderImage span.top {
	width: 640px !important;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
	height: 110px;/* กำหนดได้ตามพอใจ  */
}
.s3sliderImage span.bottom {
	width: 640px !important;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
	height: 110px;/* กำหนดได้ตามพอใจ  */
}
.s3sliderImage span.left {
	width: 110px !important;/* กำหนดได้ตามพอใจ  */
	height: 640px;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}
.s3sliderImage span.right {
	width: 110px !important;/* กำหนดได้ตามพอใจ  */
	height: 640px;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}

หนังสือ Selenium IDE for Starter มีขายแล้ววันนี้ เขียนโดยผมเอง วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

ทำไมต้องใช้ Selenium IDE

ความสุข
ลองคิดดูจากเมื่อก่อนเราเขียนโปรแกรมเสร็จแล้ว เราต้องมาทดสอบโปรแกรมว่าทำงานถูกต้องหรือเปล่าซ้ำๆ น่าเบื่อ พอเรานำ Selenium IDE มาใช้ เราเขียนโค้ดเสร็จ กด Selenium IDE เพื่อให้มันช่วยป้อนข้อมูล ช่วยคลิก ช่วยตรวจข้อมูลว่าถูกต้องหรือไม่ เราแค่นั่งจิบกาแฟและมอง เมื่อทดสอบเสร็จมันจะรายงานผลด้วยว่าไม่ผ่านตรงไหนบ้าง

ความผ่อนคลาย
เมื่อการทำงานซ้ำๆเดิมๆ น่าเบื่อหน่ายเราปล่อยให้เป็นหน้าที่ของผู้ช่วยอัตโนมัติ (Selenium IDE) เสียแล้ว เราก็นั่งทำงานอย่างไม่น่าเบื่อ ชิวๆ มีพลัง

เวลา
บางคนอาจจะแย้งว่าไม่จริงหรอกพอหัวหน้าเห็นเราว่างก็เพิ่มงาน มันก็จริง แต่อย่าลืมว่างานที่ทำลงไปและเครื่องมือที่ใช้เราสามารถเอาไปลงเรซูเมเราได้ ยิ่งมีผลงานมากมากในเวลาสั้นๆ ยิ่งสะท้อนความสามารถและตั้งใจทำงาน หรือไม่อย่างนั้น ก็มีเวลาศึกษาความรู้เพิ่ม อย่าลืมนะครับว่า เครื่องมืออัตโนมัติ มันไม่ต้องมองแป้นคีย์บอร์ด ตอนที่มันพิมพ์
งานออกมาดีกว่า
เพราะเราไม่ต้องคอยตรวจความผิดของโปรแกรมเอง ทำให้มีเวลา มีพลัง ที่จะป้องกันบักในจุดที่เป็นเล็กๆน้อยๆ หรือไม่ก็มีเวลาเล่นโปรแกรมของตัวเอง เพื่อหาข้อผิดพลาดของโค้ดได้มากขึ้น
ฯลฯ

ในฐานะเจ้าของบริษัทหรือหัวหน้าแผนกก็ควรอย่างยิ่งที่จะให้ลูกน้องรู้เรื่อง Selenium IDE ใช้ Selenium IDE เป็น เพราะเมื่อลูกน้องเขียนโค้ดเสร็จเร็ว โค้ดมีประสิทธิภาพ บริษัทก็กำไร หัวหน้าก็มีผลงาน ลองคิดดู บริษัทจ้างโปรแกรมเมอร์มา ถ้าคิดค่าตัวเป็นวัน มันก็หลายบาท แล้วโปรแกรมเมอร์หมดเวลาไปกับการนั่งพิมพ์ป้อนข้อมูลลงฟอร์ม เพื่อทดสอบความถูกต้องของโปรแกรมเนี่ยนะ มันไม่เม้กเซ้นต์

Selenium IDE for Starter

Selenium IDE for Starter



ต้องการซื้อคลิกที่นี่

https://leanpub.com/seleniumideforstarter

แสดงความคิดเห็น

comments