Đâ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]