Thay ảnh khi cuộn chữ

Các bác cho em hỏi: giả sử em có 4 cái ảnh, em muốn khi mình cuồn chữ thì các ảnh thay liên tục, tức là không hiện hết ra mà các ảnh sẽ thay nhau hiển thị khi mình cuộn chữ ạ. Các bác chỉ giúp em với ạ. Em cảm ơn nhiều!!!
Em có tìm hiểu thì tìm được đoạn này:
lăn 100px hiện img1.jpg

lăn 200px hiện img2.jpg

lăn 300px hiện img3.jpg

var onScrollHandler = function() {
  var newImageUrl = yourImageElement.src;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
     newImageUrl = "img1.jpg"
  }
  if (scrollTop > 200) {
     newImageUrl = "img2.jpg"
  }
  if (scrollTop > 300) {
     newImageUrl = "img3.jpg"
  }
  yourImageElement.src = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);

Em vẫn chưa hiểu chỗ yourImageElement.src thì cụ thể mình thay thế nào ạ. Em hơi gà các bác thông cảm

Vậy code chạy được chưa ?
Đoạn code trên là ngôn ngữ gì ?

Còn nếu muốn hiểu về .src của image thì tham khảo tại đây:
https://www.w3schools.com/tags/tag_img.asp

P/s: tìm hiểu thì từ cơ bản, chứ cứ lụm rồi hỏi thì khi nào mới hiểu rõ !

7 Likes

Cái ảnh phải gắn cố định (position: fixed;) thì mới thấy được sự thay đổi. Nó chính là cái yourImageElement đấy.
Xem ra bạn nên biết HTML, CSS và cả Javascript thì mới làm được.
Mà bạn chắc chưa rành phải không. Nên học và hiểu cho tốt, bạn sẽ làm được.

8 Likes

Em cảm ơn bác đã góp ý

em cảm ơn bác nhiều ạ

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?