本案例兩個功能: 第一,默認是自動圖片輪播; 第二,hover到圖片下面的不同數字,切換到數字對應的圖片, 鼠標移出數字,動畫從當前位置開始繼續循環播放
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d{position: relative;top: -30px;}
label{margin: -5px;}
.one{width: 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>