สร้าง slide image ง่ายๆ ด้วย Cycle Plugin

admin   เมษายน 13, 2012  

ขอนำเสนออีก 1 ปลั๊กอินยอดนิยมของ jquery ใว้ใช้สำหรับทำ slideshows รูปภาพ
สำหรับตัวนี้มี features ให้เล่นค่อนข้างเยอะครับ เช่น fade, scroll, shuffle, zoom และอีกมากมาย
ติดตั้งและใช้งานง่าย สามารถกำหนดความกว้าง ความสูงของภาพได้ง่ายๆ โดยใช้ css ครับ

Live Demo

วิธีการติดตั้งดังนี้ครับ

1. ดาวโหลดไฟล์ js และ css

Download

2. เขียนโค้ด include ไฟล์ css, jquery และตัว Cycle Plugin ครับ

1
2
3
<link type="text/css" href="cs/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

3 เขียน code html

1
2
3
4
5
<div id="slide-img">
    <img src="https://www.piranon.com/wp-content/uploads/2012/04/slied-image-01.jpg" alt="slied-image-jquery" />
    <img src="https://www.piranon.com/wp-content/uploads/2012/04/slied-image-02.jpg" alt="slied-image-jquery" />
    <img src="https://www.piranon.com/wp-content/uploads/2012/04/slied-image-03.jpg" alt="slied-image-jquery" />
</div>

แท็ก div จะต้องกำหนด id ใว้ เพื่อจะใช้ javascript เรียกควบคุมต่อไป

4. เขียน code javascript เพื่อควบคุมแท็ก div ให้เป็น slide

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
	$(document).ready(function() {
		$('#slide-img').after('<div id="nav" class="nav">').cycle({
			fx:     'fade',
			speed:  300,
			timeout: 5000,
			pager:  '#nav'
		});
	});
	</script>

สามารถเปลี่ยนค่าต่างๆ เช่น ระบบการเปลี่ยนภาพ หรือ เวลาการเปลี่ยนภาพได้ในฟังก์ชันนี้

โค้ดทั้งหมด

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>สร้าง slide image ง่ายๆ ด้วย Cycle Plugin | Piranon.com</title>
	<meta charset="utf-8" />
	<meta name="keywords" content="slide, image,slide image, jquery, jquery plugin,slide image plugin,image,jquery,jquery plugin" />
	<meta name="description" content="ปลั๊กอิน (plugin) ยอดนิยมของ jquery ใว้ใช้สำหรับทำ slideshows รูปภาพ (image)" />
	<link rel="shortcut icon" href="https://www.piranon.com/wp-content/themes/black-with-orange/images/icon.ico" />
 
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	<link type="text/css" href="cs/style.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#slide-img').after('<div id="nav" class="nav">').cycle({
			fx:     'fade',
			speed:  300,
			timeout: 5000,
			pager:  '#nav'
		});
	});
	</script>
 
</head>
 
<body>
 
	<div id="slide-img">
		<img src="https://www.piranon.com/wp-content/uploads/2012/04/slied-image-01.jpg" alt="slied-image-jquery" />
		<img src="https://www.piranon.com/wp-content/uploads/2012/04/slied-image-02.jpg" alt="slied-image-jquery" />
		<img src="https://www.piranon.com/wp-content/uploads/2012/04/slied-image-03.jpg" alt="slied-image-jquery" />
	</div>
	<br />
	<a href="https://www.piranon.com/%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87-slide-image-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-cycle-jquery-plugin/">Back</a>
</body>
</html>

ดูเพิ่มเติม
http://jquery.malsup.com/cycle/

Comments

comments

Powered by Facebook Comments