您的位置：首页 > Web前端 > JavaScript

制作一个简易的相册用js

2013-03-04 20:28 696 查看

主要功能介绍：

1、图片可以从第一张循环切换图片

2、鼠标移到图片上可以停止图片的切换

3、鼠标在移出后图片可以继续图片的切换

4、点击1、2、3、4、5可以实现高亮的显示然后停止图片的切换并且图片可以跳到你点击的图片上

5、鼠标再离开时继续从你鼠标离开的下一张图片开始切换。

<html>

<head>

<meta charset="utf-8"/>

<style>

*{margin:0px;padding:0;border:0;}

#div1{height:400px;width:400px;background-color:green;margin:auto;margin-top:2px;

}

#div2{height:350px;width:390px;background-color:yellow;margin-left:5px;}

#div2 img{height:350px;width:390px;}

#div3 li{list-style:none;float:left;margin-left:40px;font-size:20px;border:3px solid #099;height:15px;width:20px; margin-top:2px;background-color:#609;}

</style>

</head>

<body onload="start_Interval()">

<div id="div1">

<div id="div2" >

<img src="1.jpg" id="img1" onmouseover="stop_Interval()" onmouseout="start_Interval()"/>

</div>

<div id="div3">

<ul>

<li id="p1" onmouseover="dd(1)" onmouseout="start_Interval()">1</li>

<li id="p2" onmouseover="dd(2)" onmouseout="start_Interval()">2</li>

<li id="p3" onmouseover="dd(3)" onmouseout="start_Interval()">3</li>

<li id="p4" onmouseover="dd(4)" onmouseout="start_Interval()">4</li>

<li id="p5" onmouseover="dd(5)" onmouseout="start_Interval()">5</li>

</ul>

</div>

</div>

<script type="text/javascript">

var interId='';

var k=1;

function tiaozhuan(){

var im=document.getElementById('img1');

if(k==6){

   k=1;

}

   for(i=1;i<=5;i++){

   document.getElementById('p'+i).style.backgroundColor='';

   document.getElementById('p'+k).style.backgroundColor='yellow';

   }

   im.src=k+'.jpg';

   k++;

}

function stop_Interval(){

clearInterval(interId);

}

function start_Interval(){

interId=setInterval('tiaozhuan()',1000);

}

function dd(n){

stop_Interval();

for(i=1;i<=5;i++){

document.getElementById('p'+i).style.backgroundColor='';

}

document.getElementById('p'+n).style.backgroundColor='yellow';

document.getElementById('img1').src=n+".jpg";

k=n;

}

</script>

</body>

</html>

图例：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 制作一个简易的相册用js onmouseout

相关文章推荐

新的分享

章节导航