<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮番</title>
<link rel="stylesheet" href="scriptTest2.css" type="text/css" >
<script type="text/javascript" src="scriptTest2.js"></script>
</head>
<body onload="init()">
<div class="con">
<img src="image/photo1.jpg" width="400" height="400" id="img">
<div id="labels">
<label id="lab1"> 1 </label>
<label id="lab2"> 2 </label>
<label id="lab3"> 3 </label>
<label id="lab4"> 4 </label>
<label id="lab5"> 5 </label>
<label id="lab6"> 6 </label>
<label id="lab7"> 7 </label>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.con{
margin: 0 auto;
width: 500px;
height: 500px;
text-align: center;
}
#labels{
position:relative ;
top: -30px;
}
.one{
border: 1px solid #aaa;
background-color: red;
}
var n = 0;
var t = 0;
function init(){
//获取labels，然后进行循环判断
var labels = document.getElementById('labels').getElementsByTagName("label");
for(var i = 0 ; i < labels.length ; i++){
//通过循环i，获取选中的是哪个labels数组里的哪个label
labels[i].onmouseover = function(){
clearTimeout(t); //先清除时间
n = this.innerText*1; //更改n的值
var img = document.getElementById('img');//获取img的值，并设置img和label对应
img.src = "image/photo"+n+".jpg";
clear(); //先清空label的样式
//设置选中label的样式
document.getElementById("lab"+n).className= "one";
}
labels[i].onmouseout = function(){
fun();//当鼠标离开，继续执行fun()循环，n值已设置好，传过去后，执行n++
}
}
//进来init就调用fun进行循环
fun();
}
//循环播放图片，并与label同步
function fun(){
if(n == 7){
n = 0
}
n++;
//获取img的定位,并更改图片
var img = document.getElementById('img');
img.src = "image/photo"+n+".jpg";
clear();//先清空label的样式
//设置选中label的样式
document.getElementById("lab"+n).className= "one";
//设置时间自动循环方法
t = setTimeout("fun()",1000);
}
//清空label的样式
function clear(){
var labels = document.getElementById('labels').getElementsByTagName("label");
for(var i = 0 ; i < labels.length ; i++){
labels[i].className = "";
}
}