本案例两个功能: 第一,默认是自动图片轮播; 第二,hover到图片下面的不同数字,切换到数字对应的图片, 鼠标移出数字,动画从当前位置开始继续循环播放
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d{position: relative;top: -30px;}
label{margin: -5px;}
.one{ 10px;height: 10px;border: 1px solid black; background-color: red;}
</style>
<script>
var n =0;//图片下标 label下标
var t=0;// 清除动画用
function init(){
//1.默认进来自动播放轮播图
switchImgs();
//2. 当鼠标移入移出不同的label切换不同的图片.
var img = document.getElementById("img");
var labels =document.getElementsByTagName("label");//拿到所有的label标签对象
for(var i=0;i<labels.length;i++){//给每个label标签注册一个hover事件
labels[i].onmouseover=function(){
clearTimeout(t);//停止动画
var b= this.innerText*1;//拿到标签上的数字
img.src="images/photo_0"+b+".jpg";//显示对应的图片
clearStyle();//清除label上的样式
this.className="one";//让当前的label的样式变化
}
labels[i].onmouseout=function(){//鼠标移出动画开始,动画从当前的图片开始动画
n=this.innerText*1;//获取当前label上的数字并转换成整型
switchImgs();
}
}
}
//默认动画,图片轮播,每个1秒切换
function switchImgs(){
n++;
if(n==7){n=1;}//到达末尾的时候跳转到第一张
var img = document.getElementById("img");
img.src="images/photo_0"+n+".jpg";
clearStyle();//当图片到第二张的时候,要把label1的样式清除,
document.getElementById("i"+n).className="one";
t=setTimeout("switchImgs()",1000);
}
//清除label的所有的样式
function clearStyle(){
var labels= document.getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
labels[i].className="";//让label表的classname置为空
}
}
</script>
</head>
<body onload="init()">
<div align="center">
<img src="images/photo_01.jpg" width="400" height="500" id="img">
<div id="d">
<label id="i1"> 1 </label>
<label id="i2"> 2 </label>
<label id="i3"> 3 </label>
<label id="i4"> 4 </label>
<label id="i5"> 5 </label>
<label id="i6"> 6 </label>
</div>
</div>
</body>
</html>