Js实现图片的动态效果

2人阅读 评论(0) 收藏 举报
分类:

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

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


查看评论

js 图片动态效果

  • 2017年07月21日 14:36
  • 2.95MB
  • 下载

HTML5+javascript实现图片加载进度动画效果

HTML5+javascript实现图片加载进度动画效果  在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个。 图片加载完后,隐藏loading效果。 想看...
  • ljmkmnkl
  • ljmkmnkl
  • 2016-09-08 17:23:13
  • 1518

css 实现图片动态效果

使用方法 利用hover伪类 操作流程 首先确定要实现的效果 设置初始表示状态 动画用到的css属性 transition 属性 transition-property 规定设置过渡效...
  • qq_35532442
  • qq_35532442
  • 2017-05-11 20:29:10
  • 886

js动画效果(移动、变化效果)实现整理

如在前两篇博客中的效果,图片实现减速滑动到指定位置,在网页效果上看起来比较美观,对用户比较友善,这种效果的实现整理下发现有一个固定的模式。 实现步骤: 定义需要修改的属性当前值:var c...
  • Coder_Chang
  • Coder_Chang
  • 2017-04-21 18:10:12
  • 2761

鼠标拖动翻页特效

  • 2012年08月13日 16:39
  • 3.86MB
  • 下载

用CSS动画实现浮动跳动效果

在很多前端的网页动态效果中,我们需要实现一个动态上下回动的效果,下去之后渐渐变慢,回去之后也是先快后缓。        当然,这样的动画使用JS源代码或者其他方法都可以实现,但是有的活血会很复杂,这...
  • weixin_41262388
  • weixin_41262388
  • 2018-01-03 11:18:12
  • 212

图片无间断滚动(横向+纵向),缩略图+幻灯片

  • 2010年08月24日 10:08
  • 1.75MB
  • 下载

【CSS实现hover动态效果】

【CSS实现hover动态效果】 .wrap { width: 500px; ...
  • M_agician
  • M_agician
  • 2017-08-17 00:46:32
  • 1281

js实现文字动态显示效果

var mainfo='>>>的水果蛋糕蛋糕和>>>'; mainfo+='>>>qwertyuiop维地方电饭锅才>>>'; var anch=50;//字符串长度 functio...
  • u010756873
  • u010756873
  • 2013-12-28 12:46:58
  • 1296

电池充电时扩散页面动画效果相关

- (void)circularCharingAnimation {     if (self.circularStopFlag) return;          [UIView ani...
  • chenyong05314
  • chenyong05314
  • 2015-03-19 20:04:07
  • 611
    个人资料
    持之以恒
    等级:
    访问量: 1400
    积分: 476
    排名: 10万+
    文章存档