<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
position: relative;
}
.container > img,
.container .toolbar{
position: absolute;
}
.container > img{
left: 0;
top: 0;
}
.container .toolbar{
top: 430px;
left: 150px;
z-index: 100;
}
.container .toolbar a{
display: inline-block;
width: 20px;
height: 20px;
background-color: blue;
color: #ffffff;
text-align: center;
line-height: 20px;
text-decoration: none;
}
.container .toolbar a.curr,
.container .toolbar a:hover{
background-color: yellow;
color: #000;
}
</style>
</head>
<body>
<div class="container">
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
<img src="images/4.jpg" alt=""/>
<img src="images/5.jpg" alt=""/>
<img src="images/6.jpg" alt=""/>
<div class="toolbar">
<a href="javascript:void(0);" class="curr" onmouseover="showImg(0)" onmouseout="showImg('start')" >1</a>
<a href="javascript:void(0);" onmouseover="showImg(1)" onmouseout="showImg('start')" >2</a>
<a href="javascript:void(0);" onmouseover="showImg(2)" onmouseout="showImg('start')" >3</a>
<a href="javascript:void(0);" onmouseover="showImg(3)" onmouseout="showImg('start')" >4</a>
<a href="javascript:void(0);" onmouseover="showImg(4)" onmouseout="showImg('start')" >5</a>
<a href="javascript:void(0);" onmouseover="showImg(5)" onmouseout="showImg('start')" >6</a>
</div>
</div>
</body>
<script type="text/javascript">
var interval;
//当前图片的索引
var index = 0;
var imgs = document.querySelectorAll(".container > img");
var aes = document.querySelectorAll(".container > .toolbar > a");
function showImg(num){
if(num){
if(typeof num == "number" && num>=0 && num<aes.length){
index = num;
clearInterval(interval);
}
if(num == 'start'){
interval = setInterval(showImg,2000);
return ;
}
}
//得到图片
for(var i=0;i<imgs.length;i++){
//如果是当前要显示的图片 则设置z-index为最大 否则 设置为数组下标+1
if(i == index){
imgs[i].style.zIndex = 99;
aes[i].className = "curr";
}else{
imgs[i].style.zIndex = (i+1);
aes[i].className = " ";
}
}
if(index > imgs.length-1){
index = 0;
}else{
index++;
}
}
interval = setInterval(showImg,2000);
showImg();
</script>
</html>
