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>
浙公网安备 33010602011771号