<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:1000px;
height: 330px;
margin:0 auto;
position: relative;
}
p{
width:1000px;
height:30px;
background: rgba(0,0,0,.8);
text-align: center;
position: absolute;
bottom: 0;
left:0;
}
a{
width:30px;
height: 30px;
border-radius: 15px;
background: #fff;
color: red;
text-decoration: none;
line-height: 30px;
display: inline-block;
}
</style>
<script type="text/javascript">
window.onload=function () {
//获取img标签
var imgs = document.getElementsByTagName("img")[0];
var as = document.getElementsByTagName("a");
var t = null;
//定时器
num=1;
function change() {
imgs.src = "images/demo" + num + ".jpg";
for (var i = 0; i < as.length; i++) {
as[i].style.background = "#fff";
as[i].style.color = "red";
}
as[num - 1].style.background = "yellow";
as[num - 1].style.color = "#FFF";
num++;
if (num > 6) {
num = 1;
}
}
//定时
t = setInterval(change,1000);
for (var i = 0; i < as.length; i++) {
as[i].currentIndex=i;
as[i].onmouseover=function (e) {
clearInterval(t);
var event = e || window.event;
var src = event.target|| event.srcElement;
show(src.currentIndex);
};
as[i].onmouseout=function (e) {
num = e.target.currentIndex+1;
imgs.src = "images/demo"+num+".jpg";
t = setInterval(change,1000)
};
}
function show(obj) {
imgs.src = "images/demo"+(obj+1)+".jpg";
for (var i = 0; i < as.length; i++) {
as[i].style.background="#fff";
as[i].style.color="red";
}
as[obj].style.background="yellow";
as[obj].style.color="#FFF";
}
} </script>
</head>
<body>
<div>
<img src="data:images/demo1.jpg"/>
<p>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
</p>
</div>
</body>
</html>
