<html>
<head>
<style>
#banner {
overflow: hidden;
position: relative;
height: 500px;
}
.banner-img {
position: absolute;
height: 500px;
top: 0;
right: 0;
}
.banner-tab {
width: 639px;
height: 57px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin: -70px auto 0 auto;
padding-top: 13px;
position: relative;
z-index: 2;
overflow: hidden;
}
.banner-tab-wrap {
position: relative;
top: 70px;
width: 639px;
}
.banner-tab-inner {
margin: 0 auto;
overflow: hidden;
}
.banner-item {
float: left;
height: 40px;
width: 60px;
border: 1px solid #5d5d5d;
margin: 1px 11px;
opacity: .3;
cursor: pointer;
position: relative;
}
.selected {
border: 2px solid #444!important;
margin: 0 10px;
opacity: 1;
}
.show {
z-index: 1;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
$(function(){
$("#banner,#banner-tab").mouseover(function(){
$(".banner-tab-wrap").css("top","0px");
}).mouseout(function(){
$(".banner-tab-wrap").attr("style","");
});
$("#banner-tab span").mouseover(function(){
var index = $(this).prevAll("span").length;
$("#banner span").removeClass("show");
$("#banner span").hide();
$("#banner span").eq(index).show();
$("#banner span").eq(index).addClass("show");
$("#banner-tab span").removeClass("selected");
$(this).addClass("selected");
}).mouseout(function(){
});
});
</script>
</head>
<body>
<div id="banner">
<span class="banner-img show" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic01.jpg); width: 1423px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span>
<span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic02.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span>
<span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic03.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span>
<span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic04.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span>
</div>
<div id="banner-tab" class="banner-tab">
<div class="banner-tab-wrap" >
<div class="banner-tab-bg"></div>
<div class="banner-tab-inner" style="width:340px">
<span class="banner-item selected"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_01.png"></span>
<span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_02.png"></span>
<span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_03.png"></span>
<span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_04.png"></span>
</div>
</div>
</div>
</body>
</html>
