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