Sử dụng Jquery để tạo slideshow đơn giản

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

  • Slideshow sẽ điều khiển một chuỗi hình ảnh với khả năng tự động chuyển đổi hình ảnh liên tiếp nhau (auto-change)
  • Người dùng có thể điều khiển slideshow bằng cách click các nút Next / Previous hoặc click vào phân trang tương ứng với hình mình cần xem.
  • Khi đưa chuột vào bất kì thành phần nào của slideshow thì việc chuyển đổi hình ảnh sẽ dừng lại.

Để tìm hiểu rõ hơn về slide bạn có thể Download phiên bản demo mới nhất

Demo mang tính chất tham khảo về cách làm, các thành phần đồ họa được đơn giản hóa tối đa để người tìm hiểu không bị rối. Dưới đây là phần minh họa trực tiếp.

Các class sử dụng trong file demo.html có vai trò rất quan trọng khi xử lý bằng Jquery, bạn có thể thay đổi class trong file demo.html và style.css theo ý mình, tuy nhiên cũng sẽ cần sửa lại các class tương ứng trong file jquery.js

Trong phần code Jquery, mình đã đặt các comment khá chi tiết nhằm giải thích các bước và code Jquery. Ở đây, nguyên tắc xử lý là dựa vào tính tương ứng giữa chỉ số index của các thẻ div chứa hình ảnh và chỉ số index của các thẻ div làm điều khiển, từ đó đưa ra cách thức vận hành cho toàn slide, biến quan trọng nhất ở đây là "eindex".

Mọi thắc mắc về code và cách thức hoạt động của slide, bạn có thể liên hệ đến mình qua profile ở Đây

Chúc bạn thành công ! 

Tài liệu cùng chủ đề