jQuery Cycle Plugin

Đăng bởi Neo trong mục Miễn phí vào 19 tháng 11, 2009 | Comments
Xem Demo Tải về

jQuery Cycle plugin là một plugin nhẹ cho phép người dụng tạo các slideshow động.

Plugin này bao gồm gần như đầy đủ các hiệu ứng mà bạn cần thiết để tạo slideshow. Cycle plugin được chia thành hai phần: Phần lõi (core) và hiệu ứng (transition definitions). Phần lõi bao gồm hiệu ứng mờ và mã để định nghĩa và sử dụng hiệu ứng thêm. Phần hiệu ứng bao gồm các hiệu ứng đã được định nghĩa trước cho Cycle Plugin

Các chức năng chính:

  • Tạm dừng khi di chuột qua
  • Tự động dừng
  • Hiệu ứng chuyển tiếp giữa 2 ảnh
  • Bạn có thể xem thêm tại trang Options Reference của Cycle plugin

Cách sử dụng

Trước tiên, bạn cần download jQuery và Cycle plugin. Sau đó thêm vào trong thẻ <head> của trang web:

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Cycle plugin -->
<script type="text/javascript" src="js/jquery.cycle.all.2.73.js"></script>

Mã HTML như sau:

<div class="slideshow">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
    <img src="images/beach4.jpg" width="200" height="200" />
    <img src="images/beach5.jpg" width="200" height="200" />
</div>

Để Cycle plugin hoạt động và tùy chỉnh các hiệu ứng, bạn cần thêm:

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // Chọn kiểu hiệu ứng, ví dụ: fade, scrollUp, shuffle ...
	});
});
</script>

Bạn có thể tìm hiểu thêm các tùy chỉnh ở đây. Nếu chỉ cần hiệu ứng làm mờ (fade), bạn có thể sử dụng Cycle Lite plugin (chỉ nặng 3KB).

plugin, jquery

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter