[Bài 6]: Tạo slider bằng jquery

Bạn đang ở bài 6 trong 7 bài của serie Bài tập jquery.

Như vậy ở bài trước chúng ta đã hoàn thành bài tập tạo accordion bằng jquery rất đơn giản phải không các bạn? Ở bài tập hôm nay sẽ là bài tập tạo slider bằng jquery. Thường thì ở trang chủ của các website sẽ có một slider tự chạy các hình ảnh. Hôm nay chúng ta sẽ tạo một slider đơn giản để thực hiện chức năng đó.

free-jquery-slider

Yêu cầu:

Tạo slider bằng jquery có thể tự động chạy các ảnh qua lại.

Phân tích:

Cần tìm cách để slide tự động chuyển sau một khoảng thời gian, xác định slide tiếp theo, sau khi hết slide thì lặp lại quá trình chuyển động.

Code:


$(function(){
$('#slider li').hide().filter(':first').show();
setInterval(slideshow, 3000);
});

function slideshow() {
$('#slider li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#slider');
}

Demo

Giải thích:

filter(): trả về tất cả những phần tử đáp ứng được yêu cầu. Ở đây ta ẩn tất cả thẻ li rồi sau đó tìm phần tử đầu tiên (:first) để hiển thị ra.

setInterval(slideshow, 3000): thiết lập thời gian hiển thị của slide là 3 giây (1 giây = 1000).

fadeOut(): cho thẻ li đầu tiên hiển thị với hiệu ứng rơi xuống với tốc độ chậm (slow).

next(): tìm phần tử tiếp theo để hiển thị với hiệu ứng fadeIn(‘slow).

end().appendTo(‘#slider’): kết thúc hiển thị phần tử trước rồi sau đó thêm phần tử mới vào slider để hiển thị.

Kết luận:

Như vậy là chúng ta đã hoàn thành thêm một bài tập về jquery nữa. Qua một số bài tập đã làm thì chắc các bạn cũng đã quen thuộc hơn với những phương thức trong jquery rồi chứ? Với những gì đã làm và học được thì mình hy vọng các bạn có thể tự xử lý được các vấn đề có liên quan tới jquery ở mức độ nhất định.

[Bài 6]: Tạo slider bằng jquery
5 (100%) 2 votes

Bình luận

2 Bình luận on "[Bài 6]: Tạo slider bằng jquery"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
trackback

[…] Trong bài trước bạn đã làm việc với jquery để tạo ra một slider đơn giản. Trong bài hôm nay mình sẽ hướng dẫn bạn làm một bài tập khác đó là tạo lightbox bằng jquery. Lightbox cũng gần giống như modal là tính năng hiển thị khung nội dung lên phía trên. […]

trackback

[…] Trong bài trước bạn đã làm việc với jquery để tạo ra một slider đơn giản. Trong bài hôm nay mình sẽ hướng dẫn bạn làm một bài tập khác đó là tạo lightbox bằng jquery. Lightbox cũng gần giống như modal là tính năng hiển thị khung nội dung lên phía trên. […]

wpDiscuz