Thứ năm, ngày 20 tháng 6 năm 2013

jQuery – Tạo một Image Slide Show đơn giản

Ngày đăng: 2/4/2012, 8:21:42AM | Lượt xem: 2,378
Hot!
tag SlideShow,

Tạo một slide show bằng javascript là một việc không quá phức tạp. Bạn chỉ cần sử dụng setInterval() để định thời gian thực thi một hàm nào đó có nhiệm vụ thay đổi lần lượt các ảnh của một <img>. Tuy nhiên, để làm cho ví dụ này phức tạp hơn một chút, ta nên dùng đến sự trợ giúp của jQuery.

jQuery - Image Slide ShowTạo một slide show bằng javascript là một việc không quá phức tạp. Bạn chỉ cần sử dụng setInterval() để định thời gian thực thi một hàm nào đó có nhiệm vụ thay đổi lần lượt các ảnh của một <img>. Tuy nhiên, để làm cho ví dụ này phức tạp hơn một chút, ta nên dùng đến sự trợ giúp của jQuery.

Hàm setInterval(code,millisec,lang) sẽ thực thi một hàm được truyền vào làm tham số sau một khoảng thời gian xác định cho đến khi bạn gọi hàm clearInterval(). Tham số của hàm clearInterval() chính là giá trị trả về của setInterval(). Ta có thể gọi giá trị đó là định danh của timer.

Các tham số của hàm setInterval():

Parameter Description
code Required. A reference to the function or the code to be executed
millisec Required. The intervals (in milliseconds) on how often to execute the code
lang Optional. JScript | VBScript | JavaScript

Chuẩn bị: Chép ba tập tin ảnh vào thư mục chứa tập tin html, đặt tên các tập tin ảnh này như trong đoạn mã bên dưới.

Sau đó tôi tạo một mảng các hình ảnh sẽ dùng cho slide show và một hàm dùng để thực hiện slide show là slideImage(). Bạn đổi thay đổi ảnh của một <img> bằng cách thay đổi thuộc tính src của nó thông qua hàm attr() của jQuery.

var imgs = [
			"image (1).jpg",
			"image (2).jpg",
			"image (3).jpg"];

var imageIndex=1;

function slideImage()
{
	$("#bigImage").fadeOut("slow", function() {
		$(this).attr("src", imgs[imageIndex]).fadeIn("slow");
		if(++imageIndex>=imgs.length)
			imageIndex=0;
	});
}

Trong ví dụ này, tôi tạo thêm các hình ảnh nhỏ (thumbnail) để khi người dùng di chuyển chuột lên, bức ảnh lớn sẽ được thay đổi theo hình thumbnail đó:

var $bigImage=$("#bigImage");
$(".thumbnail").mouseover(function()
{
	$(this).fadeTo("fast",0.5);
	var src=$(this).attr("src");
	$bigImage.fadeOut("fast",function()
	{
		$bigImage.attr("src",src);
	});
	$bigImage.fadeIn("fast");
});
$(".thumbnail").mouseleave(function()
{
	$(this).fadeTo("fast",1);
});

Và cuối cùng tôi sẽ thêm một button để cho phép người dùng chạy/ngừng slide show:

var timerId=0;
var $startButton=$("#startButton");
$startButton.click(function()
{
	if(timerId==0)
	{
		timerId=setInterval(slideImage, 3000);
		$(this).text("Stop");
	}
	else
	{
		clearInterval(timerId);
		$(this).text("Start");
		timerId=0;
	}
});

Mã html hoàn chỉnh:

<html>
<head>
<title>Image Slide Show - YinYangIt's Blog</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
.thumbnail
{
	width:75px;
	height:100px;
}
</style>
<script type="text/javascript">

var imgs = ["image (1).jpg",
			"image (2).jpg",
			"image (3).jpg"];
var imageIndex=1;
function slideImage()
{
	$("#bigImage").fadeOut("slow", function() {
		$(this).attr("src", imgs[imageIndex]).fadeIn("slow");
		if(++imageIndex>=imgs.length)
			imageIndex=0;
	});
}

$(function()
{
	var timerId=0;
	var $startButton=$("#startButton");
	$startButton.click(function()
	{
		if(timerId==0)
		{
			timerId=setInterval(slideImage, 3000);
			$(this).text("Stop");
		}
		else
		{
			clearInterval(timerId);
			$(this).text("Start");
			timerId=0;
		}
	});

	var $bigImage=$("#bigImage");
	$(".thumbnail").mouseover(function()
	{
		$(this).fadeTo("fast",0.5);
		var src=$(this).attr("src");
		$bigImage.fadeOut("fast",function()
		{
			$bigImage.attr("src",src);
		});
		$bigImage.fadeIn("fast");
	});
	$(".thumbnail").mouseleave(function()
	{
		$(this).fadeTo("fast",1);
	});
});
</script>
</head>
<body>
<table>
	<tr>
		<td>
		<img id="bigImage" src="image (1).jpg" height="300px" width="200px"/>
		</td>
		<td>
		<table id="thumbnailsTable">
			<tr>
			<td><img class="thumbnail" src="image (1).jpg"/></td>
			</tr>
			<tr>
			<td><img class="thumbnail" src="image (2).jpg"/></td>
			</tr>
			<tr>
			<td><img class="thumbnail" src="image (3).jpg"/></td>
			</tr>
		</table>
	</td>
	</tr>
	</table>
	<button id="startButton">Start</button>
</body>
</html>

jQuery - Image Slide Show

http://yinyangit.wordpress.com
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Tin tiêu điểm

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Website hữu ích

Chuyên trang hỏi đáp Tinmoi.vn
Copyright © 2011 - 2012 vietshare.vnby doanhkisi2315@gmail.com- phamkhuong102@gmail.com. All rights reserved.