Bài tập javascript 15 – Viết hiệu ứng chuyển slide nâng cao phần 2

1
565
bài tập javascript

bài tập javascript 15 này, chúng ta sẽ tiếp tục với hiệu ứng chuyển slide ở bài trước thì bằng 2 nút mình đã chuyển qua lại tất cả các slide. Trong bài tập này mình sẽ thêm chuyển động animation vào lúc slide đang được chuyển. Okê mình xin được bắt đầu bài viết.

bài tập javascript 15

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

  1. Biến
  2. Câu lệnh if – else
  3. Vòng lặp for
  4. Mảng
  5. Hàm
  6. Event
  7. HTML DOM
  8. HTML DOM previousElementSibling Property

Bài tập javascript 15 – Viết hiệu ứng chuyển slide nâng cao phần 2

Mô tả bài tập: Click vào nút next chuyển đến slide tiếp theo, click vào nút back quay lại slide trước đó. Lúc slide được chuyển thì xảy ra hiệu ứng scale ở slide vào và slide ra.

Demo:

Click vào bài tập js 15 để 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ả:

bài tập javascript

File js:

  • Trong bài này mình sử dụng 2 cách viết khác nhau để chuyển slide cho nút trái và slide cho nút phải, cách viết nút phải sử dụng phương thức previousElementSibling trong bài trước rồi nên mình sẽ giải thích nữa nhé.
  • Còn viết cho nút trái, thứ nhất mình cần xác định vị trí của slide bắt đầu, vị trí của nó là 2 vì thế mình sẽ khởi tạo biến vitrislideht = 2. Tiếp đến trong function chuyenslide mình sẽ để biến vitrislide — , tương đương với vitrislide = vitrislide – 1. Vậy là ta có thể xác định được vitrislide tiếp theo chuyển tới sau mỗi lần click.
  • Thêm animation khi chuyển slide ta cần thêm 2 class là hieuungvao và hiệu ứng ra ứng với slide chuyển đến và slide ra đi. Rồi vào viết animation cho 2 cái class là được rồi.
  • Nhớ là phải remove tất cả bằng class bằng vòng lặp for duyệt qua tất cả các slide
  • Lưu ý nhỏ: Khi bạn viết chuyển động cho nút trái thì, khi chưa remove các class hieungvao và hiệu ứng ra ở nút phải. Khi ta click vào nút phải sẽ xảy ra lỗi.

Okê xong rồi đấy ! Vậy là mình đã xử lý xong Bài tập javascript 15 – Viết hiệu chuyển slide phần 2. Mình sẽ quay trở lại với bài tập khác. 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
Linh
Guest
Linh

hay qua a ơi :))))