<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SQL的小站首页</title>
<script type="text/javascript">
/*window.onload=function () {
var timer=null;
var a=document.getElementById("tip_list").getElementsByTagName("a");
var img=document.getElementById("banner_pic").getElementsByTagName("img");
if(a.length!=img.length) return;
for(var i=0;i<a.length;i++){
a[i].aa=i;
a[i].onmouseover=function () {
var that=this;
if(timer){clearTimeout(timer);
timer=null;}
timer=setTimeout(function () {
for(var k=0;k<a.length;k++){
a[k].className="";
img[k].style.display="none";
}
that.className="selected";
img[that.aa].style.display="block";
},1000)
}
}
}
*/
window.onload=function () {
// 当前高亮显示的页签的索引
var index = 0;
var timer = null;
// 获取所有的页签和要切换的内容
var a = document.getElementById("tip_list").getElementsByTagName("a");
var img = document.getElementById("banner_pic").getElementsByTagName("img");
// 遍历每一个页签且给他们绑定事件
for (var i = 0; i < a.length; i++) {
a[i].aa = i;
a[i].onmouseover = function () {
clearInterval(timer);
for (var j = 0; j < a.length; j++) {
a[j].className = "";
img[j].style.display = "none";
}
// 高亮显示当前页签
a[this.aa].className = "selected";
img[this.aa].style.display = "blcok";
};
a[i].onmouseout = function () {
timer = setInterval(function () {
index++;
if (index >= a.length) {
index = 0;
}
for (var j = 0; j < a.length; j++) {
a[j].className = "";
img[j].style.display = "none";
}
a[index].className = "selected";
img[index].style.display = "block";
}, 2000);
}
}
if (timer) {
clearInterval(timer);
timer = null;
}
timer = setInterval(function () {
index++;
if (index >= a.length) {
index = 0;
}
for (var j = 0; j < a.length; j++) {
a[j].className = "";
img[j].style.display = "none";
}
a[index].className = "selected";
img[index].style.display = "block";
}, 2000);
}
</script>
<style type="text/css">
*{margin:0;
padding:0;
}
#banner{
position: relative;
height: 560px;
width: 1344px;
overflow: hidden;
}
#banner_pic img{
width:100%;
}
#banner_pic img{
display: none;
}
#tip_list{
position: absolute;
top: 510px;
left:50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
#tip_list a:link,#tip_list a:visited{
color: white;
margin:0 10px;
}
#tip_list a:hover{
color:red;
}
#tip_list .selected{
background-color: aqua;
}
</style>
</head>
<body>
<div id="banner_box">
<div id="banner">
<ul id="banner_pic">
<li><a href="#"><img style="display:block" src="images/001.png" alt="无"></a></li>
<li><a href="#"><img src="images/2.png" alt="无"></a></li>
<li><a href="#"><img src="images/003.png" alt="无"></a></li>
</ul>
<div id="tip_list">
<a href="#" class="selected">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>
</div>
</body>
</html>
