<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>影视首页</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.banner{width:100%;height:600px;position: relative;}
.banner .con{width:100%;height:600px;}
.banner .con .img{width:100%;height:600px;position: absolute;top:0;left:0;display:none;}
.banner .btn{width:100%;height:68px;border:3px solid red;position: absolute;bottom:0;left:0;}
.banner .btn ul li{width: 120px;height: 68px;list-style: none;float:left;position: relative;margin-left: 20px;}
.banner .btn ul li img{width:120px;height:68px;}
.banner .btn ul li p.p1{width:114px;height:64px;border:3px solid #ff0;position: absolute;top:0;left:0;display: none;}
.banner .btn ul li p.p2{width:100%;height:68px;background:rgba(0,0,0,0.5);position: absolute;bottom:0;left:0; }
</style>
</head>
<body>
<div class="banner">
<div class="con">
<div class="img" style="background: url('images/d2.jpg') no-repeat center;display: block;"></div>
<div class="img" style="background: url('images/d1.jpg') no-repeat center;"></div>
<div class="img" style="background: url('images/d3.jpg') no-repeat center;"></div>
<div class="img" style="background: url('images/d4.jpg') no-repeat center;"></div>
<div class="img" style="background: url('images/d5.jpg') no-repeat center;"></div>
<div class="img" style="background: url('images/d6.jpg') no-repeat center;"></div>
<div class="img" style="background: url('images/d7.jpg') no-repeat center;"></div>
</div>
<div class="btn">
<ul>
<li>
<img src="images/2.jpg" />
<p class="p1" style="display: block;"></p>
<p class="p2" style="display: none;"></p>
</li>
<li>
<img src="images/1.jpg" />
<p class="p1"></p>
<p class="p2"></p>
</li>
<li>
<img src="images/3.jpg" />
<p class="p1"></p>
<p class="p2"></p>
</li>
<li>
<img src="images/4.jpg" />
<p class="p1"></p>
<p class="p2"></p>
</li>
<li>
<img src="images/5.jpg" />
<p class="p1"></p>
<p class="p2"></p>
</li>
<li>
<img src="images/6.jpg" />
<p class="p1"></p>
<p class="p2"></p>
</li>
<li>
<img src="images/7.jpg" />
<p class="p1"></p>
<p class="p2"></p>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
var _index=0;
var clearTime = null;
$(".btn ul li").hover(function(){
_index = $(this).index();
clearInterval(clearTime);
$(".banner .con .img").eq(_index).fadeIn(200).siblings().fadeOut(200);
$(this).find(".p1").show().parent().siblings().find(".p1").hide();
$(this).find(".p2").hide().parent().siblings().find(".p2").show();
},auto);
function auto(){
clearTime = setInterval(function(){
_index++;
if(_index>6)_index=0;
$(".banner .con .img").eq(_index).fadeIn(200).siblings().fadeOut(200);
$(".banner .btn ul li").eq(_index).find(".p1").show().parent().siblings().find(".p1").hide();
$(".banner .btn ul li").eq(_index).find(".p2").hide().parent().siblings().find(".p2").show();
},1000);
}
auto();
</script>
</body>
</html>
浙公网安备 33010602011771号