<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/new_file.css" /> <script type="text/javascript" src="js/new_file.js" ></script> <title></title> </head> <body> <div id="mapDiv" style="position: absolute;top: 100px;left: 200px; 800px;height: 600px;border: 1px solid red;text-align: center;"> <input type="button" value="start" id = "st" /> <div id="t" style=' 50px; background:url(img/t1.png);height: 48px;position: relative;left: 0px;background-size: 50px auto;top: 100px;'></div> <div id="r" style=' 50px; background:url(img/t1.png);height: 48px;position: relative;left: 0px;background-size: 50px auto;top: 200px;'></div> </div> </body> <script type="text/javascript"> var array = [["img/t1.png","img/t3.png","img/t6.png"]]; var intervalInstance = -1; i = 0; function start() { tObj = document.getElementById("t"); rObj = document.getElementById("r"); intervalInstance = setInterval(move,100); } function move() { tl = parseInt(tObj.style.left.split("px")[0]); rl = parseInt(rObj.style.left.split("px")[0]); if(rl<=725)i=(i+1)%3 else { clearInterval(intervalInstance); return; } tObj.style.left = (tl+10) + "px"; tObj.style.backgroundImage = "url("+array[0][i]+")"; rObj.style.left = (rl+25) + "px"; rObj.style.backgroundImage = "url("+array[0][i]+")"; } window.onload = function() { document.getElementById("st").onclick = start; } </script> </html>