怎樣讓一張圖片動起來
阿新 • • 發佈：2019-01-18
<!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>
<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>