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 đó.
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');
}
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.
Từ khóa tìm kiếm:
- slide ảnh jquery đơn giản
- tạo slide anh bằng jquery