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

วันนี้ผมจะมานำเสนอ 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;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}
class jquery slide Live Demo slide slide show
Avatar

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

Programmer, Blogger

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