Js实现图片的动态效果


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

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


  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值