1 <!doctype html><!--声明当前文档为html文档--> 2 <html lang="en"><!--语言为英语--> 3 <head><!--头部--> 4 <meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--> 5 <meta name="Keywords" content="关键词"> 6 <meta name="Description" content="描述"> 7 <title>爱奇艺首页导航轮播特效</title> 8 <style> 9 /*css层叠样式表的衣柜*/ 10 *{margin:0px;padding:0px;/*上下左右*/} 11 #box{width:100%;height:410px;background:#000;/*背景*//*overflow:hidden;超出隐藏*/position:relative;/*相对定位*/} 12 #box div.img ul li{list-style:none;width:100%;height:410px;display:none;/*隐藏*/opacity:1;} 13 #box div.img ul li.curr{display:block;/*显示 块级元素*/} 14 #box div.bg{width:247px;height:371px;background:url("images/bg.png");position:absolute;/*绝对定位*/ 15 top:40px;right:20px;} 16 #box div.bg div.nav{width:212px;height:340px;margin:18px 16px;/*上下 左右*/color:#ccc; 17 border-radius:8px;/*边框圆角*/overflow:hidden;} 18 #box div.bg div.nav ul li{list-style:none;/*去除实心圆的*/font-size:14px;/*字体大小*/width:212px; 19 height:34px;line-height:34px;/*行高 上下居中*/padding-left:8px;/*左内间距*/} 20 #box div.bg div.nav ul li.first{background:#699f00;color:#fff;/*字体颜色*/} 21 </style> 22 </head> 23 <body><!--身体--> 24 <!--有宽度 有高度的盒子模型 背景 边框--> 25 <div id="box"> 26 <div class="img"> 27 <ul> 28 <li class="curr" style="background:url(images/1.jpg);"></li> 29 <li style="background:url(images/2.jpg);"></li> 30 <li style="background:url(images/3.jpg);"></li> 31 <li style="background:url(images/4.jpg);"></li> 32 <li style="background:url(images/5.jpg);"></li> 33 <li style="background:url(images/6.jpg);"></li> 34 <li style="background:url(images/7.jpg);"></li> 35 <li style="background:url(images/8.jpg);"></li> 36 <li style="background:url(images/9.jpg);"></li> 37 <li style="background:url(images/10.jpg);"></li> 38 </ul> 39 </div> 40 <div class="bg"> 41 <div class="nav"> 42 <ul> 43 <li class="first">歌神啊：炎亚纶现身歌神舞台</li> 44 <li>花千骨2015:不说再见再续前缘</li> 45 <li>云中歌：AB变俏厨娘寻味爱情</li> 46 <li>奇葩说：吴莫愁庾澄庆绯闻被挖</li> 47 <li>伪装者：胡歌化身双面间谍</li> 48 <li>明若晓溪：奇女子征服呆萌总裁</li> 49 <li>爱大片：肌肉男神修炼术</li> 50 <li>神剧亮了：玩嗨云中歌特辑</li> 51 <li>福睿斯超级微电影《小睿必达》</li> 52 <li>欧美潮饮 原装进口</li> 53 </ul> 54 </div> 55 </div> 56 </div> 57 <script src="js/jquery.js"></script> 58 <script> 59 //alert($);弹出窗口代理函数 60 $("#box div.bg div.nav ul li").hover(function(){ 61 var index = $(this).index(); 62 $(this).addClass("first").siblings().removeClass("first"); 63 $("#box div.img ul li").eq(index).css({"display":"block","opacity":"0"}). 64 animate({"opacity":1},500).siblings().css({"opacity":1,"display":"none"});//自定义动画 65 66 67 //alert(index); 68 }); 69 </script> 70 71 </body> 72 </html>