![](https://i-blog.csdnimg.cn/blog_migrate/42f0d27da83f2c4d173b44c3f95eecf7.png)
<!DOCTYPE html
>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<title>Document
</title>
<script
type=
"text/javascript"
>
window.
onload=
function()
{
var
arr=
new
Array(
'/RUNNER0.JPG',
'/RUNNER1.JPG',
'/RUNNER2.JPG',
'/RUNNER3.JPG',
'/RUNNER4.JPG',
'/RUNNER5.JPG');
var
img=
document.
getElementsByTagName(
'img')[
0];
var
btns=
document.
getElementsByTagName(
"button");
var
index=
0;
var
speed=
document.
getElementById(
"speed");
//跑步函数
function
run()
{
index++;
if(
index>=
arr.
length)
index=
0;
img.
src=
"img"+
arr[
index];
}
var
objc=
null;
speed.
onchange=
function()
{
//获取你选中的速度
var
sd=
this.
options[
this.
selectedIndex].
value;
clearInterval(
objc);
objc=
setInterval(
function(){
run();
},
sd);
}
btns[
0].
onclick=
function()
{
clearInterval(
objc);
objc=
setInterval(
function(){
run();
},
500);
}
}
<
/script>
</head>
<body>
<button>开始
</button>
<button>暂停
</button>
<select
id=
"speed"
>
<option>100
</option>
<option>50
</option>
<option>10
</option>
</select>
<img
src=
"img/RUNNER0.JPG"
>
</body>
</html>
//图片文件我这里就暂时不导入了,同学们可以自己去放一些动态的图片实现这种效果