怎样让一张图片动起来

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片动起来</title>
<style>
*{padding:0px;margin:0px;}
div{
width:540px;
}
div ul li{
width:20px;height:30px;
line-height:30px;
text-align:center;
border:1px solid black;
list-style:none;
margin
}
#img{
float:left;
}
#scroll_number{float:left;}
.moveover{background:#FF0;}
.moveout{}
</style>
<script>
function $id(eleid){
return document.getElementById(eleid);
}
var pics=["image/dd_scroll_1.jpg","image/dd_scroll_2.jpg","image/dd_scroll_3.jpg","image/dd_scroll_4.jpg","image/dd_scroll_5.jpg"];
var index=0;//index表示图片的变量值；
var moveTime;//定时器
//当鼠标放在li上面是传入传入参数；
function move(num){
if(Number(num))
{
clearInterval(moveTime);//当有参数时停止计时器
index=num-1;//index=0表示第一张图片所以num-1；
}
var pic=$id("img");
var lis=$id("scroll_number").getElementsByTagName("li");

for(var i=0;i<lis.length;i++){

lis[i].className="moveout";//先移除li下面的所有样式

}

lis[index].className="moveover";//为当前的图片的li加上样式；
pic.src=pics[index];//改变当前的图片
index++;
index = index >= 5 ? 0:index;
}
moveTime=setInterval(move,1000);

function startPic()
{
moveTime=setInterval(move,1000);
}

/*初始化li的omouseover和onmouseout方法*/
οnlοad=function(){
var lis=$id("scroll_number").getElementsByTagName("li");//取得所有的li对象；
for(var i=0;i<lis.length;i++)
{
lis[i].οnmοuseοver=function()//为每一个li加上一个鼠标放上去的事件
{
var n=parseInt(this.innerHTML);
move(n);
}
lis[i].οnmοuseοut=function()//为每一个li加上一个鼠标移除的事件
{
startPic();
}
}

}

</script>

</head>

怎样让一张图片动起来相关推荐

arm开发板放张图片动起来_ARM裸机不能正确显示图片的问题
展开全部办法,只有你懂!你能不能贴出你的程序,给32313133353236313431303231363533e59b9ee7ad9431333264643733我们参考参考呢? LCD裸机驱动程 ...
arm开发板放张图片动起来_如何看待第三届集成电路创新创业大赛arm杯北理在杯赛中居然可以在0.35s内播放完20张ppt？...
感觉这比赛国赛比初赛还水,完全保密不说,作品不用检查的,明确看到有几个用了超规格的板子,显示用VGA或HDMI显示,也不检查ARM内核是否有移植进去,移植里是不是按在比赛要求有识别算法.就志愿者过来很 ...
Java多线程游戏实例分享2-雷火(手把手教你做个超炫酷的星际争霸)
观前提示: 本文涉及的小成果特别多,即使你不需要写一个和我完全相同的游戏,也可以按照需要查看某些特定功能的实现过程,说不定能够给您的程序开发带来一点小小的启发!PS:结合源代码阅读此博客更加高效. 本 ...
python实现五子棋续
Python实现五子棋标记位思路代码效果图 AI策略一点修正总结摘要: 本文主要是针对之前写过的五子棋一文中的人机进行补充和说明. 补充和说明为两个点标记位 AI策略标记位由于A ...
❤️❌ 如何用vue制作一个探探滑动组件
前言嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件 ? 一. 功能分析简单使用下探探会 ...
用ffmpeg把gif动图分离成多张图片和ffmpeg多张图片合成gif动图
用ffmpeg把gif动图分离成多张图片和ffmpeg多张图片合成gif动图(20190214) 文章目录: 一.ffmpeg把gif动图分离成多张图片二.ffmpeg多张图片合成gif动图三.把 ...
多张图片怎么合成gif动图？电脑如何将静图转换动图？
很多小伙伴都知道动图是由许多的图片合成做出来的效果,所以都会使用图片合成(一键合成高清gif动图-在线gif制作工具-gif.cn_GIF中文网)gif的方式来制作自己喜欢动图.接下来小编给大家分享一 ...
php多张图片切换效果,怎么把多张图片制作成gif动图可设置图片切换效果及显示时间...
小编在微信上跟朋友斗图的时候发现,有些表情包是用很多张图片不断切换制作成的,这种动图是怎么制作出来的呢?要是学会了,可以将自己或者朋友的照片制作成gif动图,想想就很有意思呀!那么在此小编给大家推荐一 ...
多张图片怎么做成动图表情？
多张图片怎么做成动图?前几天有个小编向我咨询了一个gif动图制作的方法,这不是双11快到了吗,他给自己的店铺活动做了一些广告图,广告图是静态图片,但是他觉得动态图片的效果更好,而且能传递出更多有价值的 ...

怎样让一张图片动起来

怎样让一张图片动起来相关推荐

最新文章

热门文章