<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
body,html{
100%;
min- 1200px;
height: 100%;
}
#top{
100%;
height: 60px;
background: #000;
}
#top:hover{
background: #333;
}
#wrap{
1200px;
margin: 0 auto;
}
#top ul{
overflow: hidden;
}
#top ul li{
list-style: none;
color: #fff;
font-size: 16px;
padding: 21px;
cursor: pointer;
}
#top .left li{
float: left;
}
#top .left{
float: left;
}
#top .right{
float: right;
}
#top .right li{
float: right;
}
#top ul li:hover{
border-bottom: 2px solid #f40;
padding: 20px;
}
#top #wrap span{
display: block;
float: right;
padding: 21px;
background: #3fc;
color: #fff;
cursor: pointer;
}
#top #wrap span:hover{
background: #3ff;
}
#top .banner{
100%;
height: 500px;
}
#top .banner img{
100%;
height: 100%;
}
.box{
position: relative;
}
#list{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -180px;
}
#list li{
list-style: none;
20px;
height: 20px;
border-radius: 50%;
background: #000;
opacity: .4;
filter: alpha(opacity = 40) ;
float: left;
margin-left:10px;
cursor: pointer;
}
#list .li{
background: #fff;
}
</style>
</head>
<body>
<div id="top">
<div id="wrap">
<ul class="left">
<li>最新活动</li>
<li>产品</li>
<li>解决方案</li>
<li>运市场</li>
<li>大数据</li>
<li>社区</li>
<li>支持</li>
<li>合作伙伴</li>
<li>更多</li>
</ul>
<span>注册有礼</span>
<ul class="right">
<li>控制台</li>
<li>备案</li>
<li>登陆</li>
</ul>
<div style="clear: both"></div>
</div>
<div class="box">
<div class="banner">
<img src="img/1.jpg" id="pic" />
</div>
<ul id="list">
<li class="li"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="js/timeSport.js" ></script>
<script>
var banner = document.getElementsByClassName("banner");
var oPic = document.getElementById("pic")
var list = document.getElementById("list");
num = 1;
var oLi = $("#list li")
for(var i=0;i<oLi.length;i++){
oLi[i].index = i;
oLi.click(function(){
num = this.index + 1;
fn();
})
}
function fn(){
sport(oPic,{'opacity':0},function(){
oPic.src = "img/"+num+".jpg";
sport(oPic,{'opacity':100})
for (var i=0;i<oLi.length;i++) {
oLi[i].className = '';
if(num == i+1){
oLi[i].style.background = '#fff';
}else{
oLi[i].style.background = '';
}
}
});
}
</script>
</body>
</html>