Js实现图片的动态效果

版权声明:本文为博主原创文章,未经博主允许也可以得转载。 https://blog.csdn.net/zrcshendustudy/article/details/79955396

<!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>

//图片文件我这里就暂时不导入了,同学们可以自己去放一些动态的图片实现这种效果


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页