Jquery - slide show

Bài đăng này đã không được cập nhật trong 2 năm

Bạn đã biết tới rất nhiều plugin của jQuery cho phép bạn tạo các slideshow với nhiều hiệu ứng đẹp, chuyên nghiệp. Cách sử dụng cũng dễ dàng, thậm chí không cần biết viết mã javascript.

Bài viết sau sẽ hướng dẫn bạn cách tự tạo ra một slideshow đơn giản bằng cách sử dụng Jquery .

Slideshow sử dụng hiệu ứng fadein và fadeout , slideDown, slideUp có sẵn trong jQuery.

Step 1. Download thư viện jquery hoặc sử dụng url như dưới

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

Step 2. Tạo Trang HTML và gắn thư viện jquery

<html>
<head>
	<title>Demo Jquery Slide Show</title>
	<meta charset='UTF-8'>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
	<div class="demoslide">
		<img src="images/1.jpg" width='500px' height='200px'>
		<img src="images/2.jpg" width='500px' height='200px'>
		<img src="images/3.jpg" width='500px' height='200px'>
		<img src="images/4.jpg" width='500px' height='200px'>
		<img src="images/5.jpg" width='500px' height='200px'>
	</div>
</body>
</html>

Step 3: Tạo Css cho slideshow

.demoslide {
		margin-top: 100px;
		width: 500px;
		margin: 0 auto;
		height: 200px;
		overflow: hidden;
	}

Vậy là ta đã tạo xong phần giao diện.

Step 4: Viết jquery tạo slideshow chuyển động cho ảnh

<script type="text/javascript">
$(function() {
	$('.demoslide img:gt(0)').hide();
	setInterval(function(){
      $('.demoslide :first-child').fadeOut() //FadeOut là ảnh đang hiện
      .next('img').fadeIn() //fadeIn ảnh tiếp theo
      .end().appendTo('.demoslide'); // chuyển vị trí ảnh xuống cuối
  	}, 3000);
})

</script>

Giải thích source code:

$('.demoslide img:gt(0)').hide();

Đoạn code này có nghĩa là ẩn tất cả các ảnh trừ ảnh đầu tiên

setInterval(function(){},3000); // đặt thời gian là 3s

Setup thời gian chuyển hình ảnh bằng hàm setInterval

$(function() {
	setInterval(function(){
      $('.demoslide :first-child').fadeOut() //FadeOut là ảnh đang hiện
      .next('img').fadeIn()}, 3000);
})

FadeOut là ảnh đang hiện, fadeIn ảnh tiếp theo

.end().appendTo('.demoslide')

Do javascript ở trên luôn luôn chọn ảnh đầu tiên trong slideshow để ẩn và chọn ảnh tiếp theo để hiện. Ta sẽ xử lý bằng cách chuyển ảnh đầu tiên (vừa bị ẩn đi) xuống vị trí cuối cùng sau khi chạy hiệu ứng.

Step 5. Demo. Như vậy ta đã có 1 slideshow đơn giản. Source code tổng hợp

<html>
<head>
	<title>Demo Jquery Slide Show</title>
	<meta charset='UTF-8'>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<style type="text/css">
	.demoslide {
		margin-top: 100px;
		width: 500px;
		margin: 0 auto;
		height: 200px;
		overflow: hidden;
	}
	</style>
</head>
<script type="text/javascript">
$(function() {
	$('.demoslide img:gt(0)').hide();
	setInterval(function(){
      $('.demoslide :first-child').fadeOut() //FadeOut là ảnh đang hiện
      .next('img').fadeIn() //fadeIn ảnh tiếp theo
      .end().appendTo('.demoslide'); // chuyển vị trí ảnh xuống cuối
  	}, 3000);
})

</script>
<body>
	<div class="demoslide">
		<img src="images/1.jpg" width='500px' height='200px'>
		<img src="images/2.jpg" width='500px' height='200px'>
		<img src="images/3.jpg" width='500px' height='200px'>
		<img src="images/4.jpg" width='500px' height='200px'>
		<img src="images/5.jpg" width='500px' height='200px'>
	</div>
</body>
</html>

Chạy thử nghiệm ta có slide sau

Thay đổi hiệu ứng bạn có thể sử dụng slideDown, slideUp

$('.demoslide :first-child').slideDown() //FadeOut là ảnh đang hiện
      .next('img').slideDown() //

Như vậy đã hoàn tất quá trình tạo SlideShow hình ảnh đơn giản bằng JQUERY và CSS. Tuy nhiên đây chỉ là SlideShow đơn giản vì thế hiệu ứng chưa được đẹp mắt, các bạn có thề tìm hiểu thêm để tạo ra Slideshow đẹp hơn.

jQuery

Mục lục