<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>360视频首页轮播banner</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.banner{width: 100%;height: 455px;position: relative;}
.banner .banner-pic{width: 100%;height:455px;position: relative;}
.banner .banner-pic a{display: block;width: 100%;height: 100%;position: absolute; top:0;left:0;display: none;}
.banner .banner-nav{width: 1060px;height: 55px;position: absolute;bottom: 0;left: 0;right: 0;margin: 0 auto;}
.banner .banner-nav ul li{width: 97px;height: 55px;float:left;list-style: none;margin: 0 8px;position:relative;}
.banner .banner-nav ul li .bg{width: 97px;height: 55px;background:rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;}
.banner .banner-nav ul li .border{width: 97px;height: 51px;border:2px solid #f90;position: absolute;top: 0;left: 0;display: none;}
.banner .banner-nav ul li .border:hover{display: block;}
.banner .banner-nav ul li .bg:hover{display: none;}
</style>
</head>
<body>
<div style="margin:0 auto; align="center"><a href="http://www.qhbang.com/">青海网</a></div>
<div class="banner">
<!-- 大图片 -->
<div class="banner-pic" id="wrap">
<a href="" style="background:url(http://p5.qhimg.com/t01fbbee369df6b8f50.jpg) center center;display:block;"></a>
<a href="" style="background:url(http://p5.qhimg.com/t01fbbee369df6b8f50.jpg) center center;"></a>
<a href="" style="background:url(http://p18.qhimg.com/t0124324c9af94db605.jpg) center center;"></a>
<a href="" style="background:url(http://p5.qhimg.com/t01fbbee369df6b8f50.jpg) center center;"></a>
<a href="" style="background:url(http://p5.qhimg.com/t01fbbee369df6b8f50.jpg) center center;"></a>
<a href="" style="background:url(http://p5.qhimg.com/t01fbbee369df6b8f50.jpg) center center;"></a>
<a href="" style="background:url(http://p5.qhimg.com/t01fbbee369df6b8f50.jpg) center center;"></a>
<a href="" style="background:url(http://p5.qhimg.com/t01fbbee369df6b8f50.jpg) center center;"></a>
<a href="" style="background:url(http://p15.qhimg.com/t011d69ae61e0e02217.jpg) center center;"></a>
</div>
<!-- 大图导航图片 -->
<div class="banner-nav" id="box">
<ul>
<li>
<img src="http://p18.qhimg.com/t014af0da8c5e719662.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
<li><img src="http://p16.qhimg.com/t01267cb6364e70e2a8.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
<li>
<img src="http://p16.qhimg.com/t01267cb6364e70e2a8.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
<li>
<img src="http://p16.qhimg.com/t01267cb6364e70e2a8.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
<li>
<img src="http://p18.qhimg.com/t014af0da8c5e719662.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
<li>
<img src="http://p18.qhimg.com/t014af0da8c5e719662.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
<li>
<img src="http://p18.qhimg.com/t014af0da8c5e719662.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
<li>
<img src="http://p16.qhimg.com/t01267cb6364e70e2a8.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
<li>
<img src="http://p16.qhimg.com/t01267cb6364e70e2a8.jpg">
<div class="bg"></div>
<div class="border"></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
/* var oA=document.getElementById("wrap").getElementsByTagnName("a");
var oLi=document.getElementById("box").getElementsByTagnName("li");
for (var i=0;i<oLi.lenght; i++) {
oLi[i].index = i;
oLi[i].onclick = function(){
for (var j = 0; j < oLi.lenght; j++) {
if (j == this.index) {
oA[j].style.display = "block"
}else{
oA[j].style.display = "none"
}
for (var i = 0; i < oLi.lenght; i++) {
oLi[i].className = ""
}
this.className ="hover"
}
}
}*/
$(".banner .banner-nav ul li").click(function(){
$(this).addClass("hover").siblings().removeClass("hover");
var _index = $(this).index();
$(".banner .banner-pic a").eq(_index).show().siblings().hide();
})
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
