html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/lunbotu.css">
</head>
<body>
<div class ="main" id="main">
<!--导航-->
<div class="nav" id="nav">
<div class="nav-row"><a href="#"><span>首页</span></a></div>
<div class="nav-row"><a href="#"><span>点击看看</span></a></div>
<div class="nav-row"><a href="#"><span>会自动的</span></a></div>
<div class="nav-row"><a href="#"><span>我的网站</span></a></div>
</div>
<!--图片轮播-->
<div class="banner" id="banner">
<a href="#"><div class="banner-slide slide1 slide-active"></div>
</a>
<a href="#"><div class="banner-slide slide2 "></div>
</a>
<a href="#"><div class="banner-slide slide3"></div>
</a>
<a href="#"><div class="banner-slide slide4 "></div>
</a>
</div>
</div>
<script src="js/luobotu.js"></script>
</body>
</html>
css:
*{padding:0;
margin:0;}
body{font-family:Microsoft YaHei;
}
a:link,a:visited{text-decoration: none}
.main{width:1000px
height:500px;
overflow: hidden;
}
.nav{width: 1000px;
height: 50px;
background: #FFF;
border:dashed #666;
border-bottom: none;
}
.nav-row{
font-size: 22px;
margin:auto auto;
width: 250px;
height: 50px;
text-align: center;
float:left;
background:#666;
line-height:50px;
}
.banner{width: 1000px;
height: 450px;
overflow: hidden;
position: relative;
}
.banner-slide{width: 1000px;
height: 450px;
position: absolute;
background-repeat: no-repeat;
display:none
}
.slide-active{display:block;}
.slide1{
background-image:url("../img/1.jpg")
}
.slide2{
background-image:url("../img/3.jpg")
}
.slide3{
background-image:url("../img/4.jpg")
}
.slide4{
background-image:url("../img/5.jpg")
}
javascript:
//封装一个代替getElementById()的方法
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
var index=0,
timer=null,
pics=byId("banner").getElementsByTagName("div"),
len=pics.length;
function slideImg(){
var main=byId("main")
//滑过清楚定时器，离开后继续
main.onmouseover = function(){
//滑过清除定时器
}
main.onmouseout = function(){
//鼠标离开后定时器开始
timer = setInterval(function(){
index++;
if(index>=len){index=0
}
//切换图片
changeImg();
},1000)
}
}
}
//切换图片
function changeImg(){
pics[index].style.display = 'block';
}
}
slideImg();
相关分类