Bài tập javascript 13 – Viết hiệu ứng tự động chuyển slide

1
1437
bài tập javascript

bài tập javascript 13 này, mình sẽ hướng dẫn các bạn viết hiệu ứng tự động chuyển slide. Nhìn chung thì nó cũng đơn giản thôi :D. Chúng ta chỉ cần viết thêm một hàm tự động chuyển slide nữa là được thôi mà. Mình xin được bắt đầu bài viết.

tự động chuyển slide

Kiến thức cần có:

  1. Biến
  2. Mảng
  3. Hàm
  4. Event
  5. HTML DOM
  6. HTML DOM previousElementSibling Property
  7. Phương thức setInterval() và clearInterval()

Mình sẽ giải thích qua hai phương thức setInterval() và clearInterval()

setInterval(): Nó sẽ lặp lại một công việc trong một khoảng thời gian đã đặt sẵn, ví dụ luôn cho trực quan

Tí mình sẽ dùng 2 thằng này để xử lý, cứ sau 2000 mili giây = 2 giây thì tự động chuyển slide. Sau đó click vào nút sẽ gọi phương thức clearInterval thế là nó dừng thôi :D.

Bài tập javascript 13 – Viết hiệu ứng tự động chuyển slide

Mô tả bài tập: Mở trang web ra slide tự động chuyển theo một khoảng thời gian nhất định, khi click vào nút thì nó dừng.

Demo:

Click vào bài tập js 13 để xem kết quả.

Mình sẽ code và giải thích chi tiết ở ngay phía sau.

Code: html

Code: css

Code JS:

Kết quả: Hình ảnh giống hai bài trước thôi mình hơi bận nên không viết lại html css được hehe

File js:

  • Các bạn chú ý phần code tự động chuyển slide thôi, phần click vào chuyển slide mình đã đề cập trong bài viết trước rồi nhé.
  • Chúng ta sẽ khởi tạo một hàm auto(), gọi nó trước hay sau cũng được.
  • Trong hàm auto chúng ta sử dụng phương thức setInterval() mình đã nói về phương thức này ở trên.
  • Trong phương thức setInterval() chúng ta khởi tạo một hàm vô danh, công việc chính làm trong này
  • Truy xuất cái thằng có cái cái class là ‘ra’, mình đặt class này cho slide đầu tiên trong html luôn.
  • Dùng phương thức previousElementSibling để lấy vị trị của thằng hiện tại, hiện tại là sao vì mình dung setInterval() nên sau một khoảng thời gian nó lại gọi lại thằng previousElementSibling này
  • Vòng for tiếp theo để remove tất cả thằng ‘ra’
  • Đến đây quay lại đọc code mình chú thích luôn ngay trong code cho trực quan rồi :v

Okê xong rồi đấy ! Vậy là tui đã xử lý xong Bài tập javascript 13 – Viết hiệu ứng tự động chuyển slide. Mình sẽ quay trở lại với bài tập khác. Các bạn nên xóa từng phần code để hiểu rõ tác dụng của nó. Đó là cách học của mình, mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

avatar
  Subscribe  
newest oldest most voted
Notify of
Nguyen Nam
Guest
Nguyen Nam

ad xin hỏi sao đặt 6 tấm hình nó chỉ chuyển được 4 tấm