怎样让一张图片动起来

来源：互联网发布：装修设计软件编辑：程序博客网时间：2024/04/27 22:39

<!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方法*/
onload=function(){
var lis=$id("scroll_number").getElementsByTagName("li");//取得所有的li对象；
for(var i=0;i<lis.length;i++)
{
lis[i].onmouseover=function()//为每一个li加上一个鼠标放上去的事件
{
var n=parseInt(this.innerHTML);
move(n);
}
lis[i].onmouseout=function()//为每一个li加上一个鼠标移除的事件
{
startPic();
}
}

}

</script>

</head>

<body>
<div>
<img src="image/dd_scroll_1.jpg" id="img"/>
<ul id="scroll_number">
<li onMouseover="move()">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>

0 0