Bài tập javascript 11 – Viết hiệu ứng chuyển slide

0
458
bài tập javascript

bài tập javascript 11 này, mình sẽ xử lý một hiệu ứng mới đó là hiệu ứng chuyển slide. Nhìn chung thì nó cũng đơn giản thôi :D. Mọi thứ sẽ trở nên đơn giản khi ta có được nó, có những thứ khi có được có thể mất đi. Nhưng bài tập javascript này, khi biết làm rồi thì nó sẽ không đi đâu cả :D. Mình xin được bắt đầu bài viết.

hiệu ứ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

Thằng previousElementSibling này sẽ trả về phần tử em của nó, ví dụ mình có 3 cái div. Chúng ta truy xuất div này bằng div = querySelectorAll. Nó sẽ trả về một mảng div[0] div[1] div[2], khi chúng ta truy xuất thằng div[1] nó trả về div[2]. Khi truy xuất div[3] nó trả về div[2], truy xuất div[0] nó trả về null. Tí mình sẽ phải dùng thằng này để xác định vị trí của slide.

Bài tập javascript 11 – Viết hiệu ứng chuyển slide

Mô tả bài tập: click vào một chấm thì chuyển sang slide khác, thế thôi :D.

Demo:

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

hiệu ứng chuyển slide

File js:

  • Uk thì chỉ truy xuất phần tử thôi chứ có gì đâu nhỉ 😀
  • Mấy cái này mình giải thích chi tiết trong các bài trước rồi nha, ngại nói lại lắm. Ai chưa biết xem lại bài tập trước nha.
  • Điểm khác của bài này là cái thằng previousElementSibling mình sử dụng vòng lặp for điều kiện dừng khi nutnay == null. Thằng kia nó sẽ trả về thằng em nó . Lúc ấy thằng vitrislide sẽ lấy được vị trí của nó.

Hoặc các bạn có thể dùng attribute data để làm, ngắn hơn đấy. Nhưng nhớ đặt cái data cho mấy thằng html :D.

Code js:

Okê xong rồi đấy ! Vậy là mình đã xử lý xong Bài tập javascript 11 – Viết hiệu ứng chuyển slide. 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  
Notify of