<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame Animation</title>
<script>
window.onload = function() {
var count = 0;
var image = document.getElementById('image');
var frames = [
'7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png'
];
setInterval(function() {
image.src = "../animation/" +
frames[count % frames.length];
count = count +1;
}, 1000/20);
};
</script>
</head>
<body>
<img id = "image" />
</body>
</html>