<!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>
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
