打造一个简易的相册用js
日期：2014-05-16 浏览次数：20324 次
主要功能介绍：
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+
