Chuyển đổi Hình ảnh Bằng Javascript - Nongdanit

Skip to content

Đây là một ví dụ đơn giản về javascript cụ thể là phương thức setTimeout(), chúng ta sẽ thay đổi các số trong tên ảnh mà chúng ta đã chuẩn bị trước(các ảnh nằm cùng thư mục và tên đều giống nhau chỉ khác ở số thứ tự), ở ví dụ này có 4 ảnh, lần lượt có tên là: example-slide-1.jpg, example-slide-2.jpg, example-slide-3.jpg, example-slide-4.jpg

code HTML:

[html] <img name="image" src="img/example-slide-1.jpg" alt=""> [/html]

Chỉ cần khai báo hình ảnh trong src đúng theo thư mục chứ hình ảnh và đặt tên name là image(tùy các bạn)

code JavaScript:

[php] <script type="text/javascript"> window.onload = function(){ setTimeout("switch_Image()", 3000); } var current = 1; var num_image = 4; function switch_Image(){ current++; document.images[‘image’].src =’img/example-slide-‘ + current + ‘.jpg’; if(current < num_image){ setTimeout("switch_Image()", 3000); }else if(current == num_image){ current = 0; setTimeout("switch_Image()", 3000); } } </script> [/php]

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

Hàm switch_Image() 3s sẽ chạy một lần và tăng dần biến current lên 1 sau khi tăng lên 4 sẽ được gán lại là 0 và tiếp tục chạy lại làm switch_Image().

dòng  document.images[‘image’].src =’img/example-slide-‘ + current + ‘.jpg’ chính là phương pháp dùng để gán giá trị cho thuộc tính src của hình ảnh ở đây ta đã thay thế hình ảnh bằng một đường dẫn tới hình ảnh mới.

Vậy là xong, các bạn có thể xem demo tại đây:

[create_button_post thamso1=”http://nongdanit.info/demo/chuyen-doi-anh-bang-javascript/” thamso2=’Demo’] [/create_button_post]

Chuyển đổi hình ảnh bằng javascript Tagged on: javascript

• ← Xử lý thời gian trong PHP
• Tối ưu hóa câu truy vấn trên hệ quản trị MySQL →

Archives

• February 2019
• January 2019
• December 2018
• November 2018
• September 2018
• August 2018
• July 2018
• June 2018
• February 2018
• January 2018
• December 2017
• November 2017
• October 2017
• September 2017
• August 2017
• July 2017
• June 2017
• May 2017
• April 2017
• March 2017
• February 2017
• January 2017
• December 2016
• November 2016
• October 2016
• July 2016
• May 2016
• March 2016
• February 2016
• January 2016
• December 2015
• November 2015
• October 2015
• September 2015
• August 2015
• July 2015

Meta

• Log in