360视频首页轮播图 半成品

<!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>