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

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 . 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():

Bạn đang đọc: jQuery – Tạo một Image Slide Show đơn giản

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 những 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 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 những hình ảnh nhỏ ( thumbnail ) để khi người dùng vận động và di chuyển chuột lên, bức ảnh lớn sẽ được đổi khác 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à sau cuối 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 hảo :