Ví dụ về chuyển đổi hình tự động với Javascript

Sau một số bài viết giới thiệu về DOM có lẽ cũng nên làm một vài ví dụ cho hứng khởi chứ cứ lý thuyết hoài cũng ngán, nhưng có lý thuyết thì mới có thực hành và lý thuyết vững thì thực hành mới thành công. Từ giễ tới khó luôn là phương châm đúng, sau khi lục lọi trong mớ ví dụ đã làm tôi đã tìm được một ví dụ có thể nói là rất giễ thực hành. Ví dụ sau sẽ thực hiện chức năng tự động chuyển hình ảnh theo một thời gian định trước. Tuy ví dụ sau không thực sự ứng dụng nhiều trong thực tế bởi vì đây chỉ là một ví dụ đơn giản, nhưng ví dụ này cũng là tiêu biểu để bạn hiểu rõ về phương thức setTimeout() mà tôi có giới thiệu ở bài trước.

Đầu tiên chúng ta cần chuẩn bị mốt số hình ảnh làm ví dụ. Điều quan trọng là bạn phải đảm bảo rằng các hình ảnh nằm trong cùng thư mục và tên của chúng phải cùng mẫu theo một quy tắc như ví dụ sau tôi chuẩn bị 4 hình với tên là image1.jpg, image2.jpg, image3.jpg, và image4.jpg.

Trước khi tiến hành làm code thì chúng ta phải phân tích giải thuật của ví dụ trước

Giải thuật

Xây dựng một hàm chuyển đổi hình ảnh, chỉ cần thay thế số cuối cùng trong tên hình ảnh, sau khi thay hình thì sẽ gọi lại hàm thay hình một lần nữa sau thời gian nhất định, lợi dụng việc gọi lại hàm chúng ta dùng một biến đếm tăng dần để làm số thay thế cho phần tên hình ảnh, nếu thay đến hình ảnh cuối cùng thì không thay nữa vậy phải có một điều kiện dừng nằm ngay trong hàm đổi hình.

code

Trong HTML có một hình ảnh ban đầu như sau:

<img name="myimage" src="images/image1.jpg" />

Xây dựng hàm chuyển đổi hình ảnh:

<script type="text/javascript">
window.onload = function(){
  setTimeout("switchImage()", 3000);
}
var current = 1;
var numIMG = 4;
function switchImage(){
  current++;
  // Thay thế hình
  document.images['myimage'].src ='images/image' + current + '.jpg';
  // Gọi lại hàm nếu thõa đk
  if(current < numIMG){
   setTimeout("switchImage()", 3000);
  }
}
</script>

Dòng 5 tạo biến current để làm số thay đổi trong tên hình, dòng 6 tạo biến numIMG để lưu thông tin về tên hình cuối cùng là tên hình có số 4 cuối. Hàm switchImage() dùng để chuyển đổi hình ảnh, trong hàm này đầu tiên tăng biến current cộng thêm 1 để dùng làm tên hình sẽ thay, dòng 10 chính là phương pháp dùng DOM cũ để gán giá trị cho thuộc tính src của hình ảnh (trong DOM thì hình ảnh sẽ là một mảng images và chúng ta có thể dùng tên của hình ảnh làm chỉ mục cho hình ảnh đó) ở đây chúng ta đã thay thế hình ảnh bằng một đường dẫn tới hình ảnh mới. Phương thức setTimeout("switchImage()", 3000)  chỉ chạy khi thỏa điều kiện là chưa tiến đến hình cuối cùng, phương thức setTimeout("switchImage()", 3000) sẽ gọi hàm switchImage() sau 3s.

window.onload chính là sự kiện khi toàn bộ trang của chúng ta được tải xong, sau khi tải xong thì chạy phương thức setTimeout("switchImage()", 3000) để gọi hàm switchImage() sau 3s.

Hàm thực hiện chuyển đổi hình ảnh trên sẽ dừng lại khi hình ảnh cuối cùng được thay nhưng nếu bạn muốn hình ảnh thay từ 1 tới 4 rồi sau đó lại tiếp tục từ 1 tới 4 nữa, cứ như thế cho tới chết thì bạn chỉ cần thay đoạn code

if(current < numIMG){
  setTimeout("switchImage()", 3000);
}

Thành

if(current == numIMG){current =0;}
setTimeout("switchImage()", 3000);

Nếu bạn đã học một ngôn ngữ lập trình nào đó thì sẽ hiểu ngay đây là phương pháp lập trình bằng đệ quy.

Vậy là chúng ta đã thực hiện xong một ví dụ đơn giản, tôi đã cố gắng giải thích cho bạn hiểu nhưng nếu bạn còn chưa hiểu lắm thì bạn hãy tìm hiểu thông tin về phương pháp lập trình đệ quy. Có một điều bạn thấy setTimeout là một phương thức nhưng đằng trước nó chúng ta không cần ghi đối tượng bởi đơn giản đây là phương thức của đối tượng window và bạn không cần phải ghi đối tượng window trước cũng được