爱奇艺首页导航轮播特效

 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>