-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (81 loc) · 4.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>左进左出</title>
<style>
body,div,img,ul,li,a,dl,dd{margin:0;padding:0; font-family: '微软雅黑'}
ul,li,{list-style: none;}
html,body{width: 100%;height: 100%; overflow: hidden;}
a{color: #fff; text-decoration: none;}
.slide{width: 100%;height: 100%; position: relative;}
/* 左右按钮 */
.slide .prev,.slide .next{position: absolute; top: 45%; width: 80px; height: 200px; text-indent: -9999px; z-index: 20;}
.slide .prev{left:40px; background:url(images/pre_ico.png) center center no-repeat;}
.slide .next{right:40px;background:url(images/next_ico.png) center center no-repeat;}
/* 圆点按钮 */
.slide .slide-dot{position: absolute; bottom:5%; width: 100%; text-align: center; z-index: 20;}
.slide .slide-dot dd{display:inline-block;*display:inline;*zoom:1;margin:0 9px;width:12px;height:12px; text-indent: -9999px;background-image:url(images/sy_icon1.png);background-repeat:no-repeat;background-position:-28px 0px;cursor:pointer;}
.slide .slide-dot dd.active{background-position:0px 0px;}
/* 内容部分 */
.slide{position: absolute;width: 100%;height: 100%; z-index: 5;}
.slide li{position: absolute;width: 100%;height: 100%;}
.slide li.active{ z-index: 10;}
/* 背景图 */
.slide .slide-bg{position: absolute; top: 0; left: 0; width: 100%;height: 100%;}
.slide .slide-bg img{position: absolute; top: 0; left: 0; max-width: 100%; display: none;}
/* 小图及内容 */
.slide .slide-img{position: absolute; left: -100%;}
.slide .slide-img img{display: block;}
.slide .slide-txt{ position: absolute; left: -100%; top: 35%; width: 410px;}
.slide .slide-txt .txt_t{margin-bottom:20px;line-height:38px;font-size:30px;font-weight:700;color:#fff;}
.slide .slide-txt .txt_c{margin-bottom:30px;font-size:16px;line-height:22px;color:#fff;}
</style>
</head>
<body>
<div id="slide" class="slide">
<ul>
<li>
<div class="slide-bg"><img src="images/p1.jpg" /></div>
<div class="slide-img imgb"><img src="images/w1.png" /></div>
<div class="slide-txt">
<div class="txt_t">创造美学视觉网站<br />提供兼容多平台新技术</div>
<div class="txt_c">万科双月湾-全新趣味性视觉体验<br />通过功能和设计，全方位提升产品战略。</div>
<div class="bt jd_bt">
<div data-to="b2" class="bt_t"><a href="#">进入案例</a></div>
<div class="bt_b"></div>
</div>
</div>
</li>
<li>
<div class="slide-bg"><img src="images/p2.jpg" /></div>
<div class="slide-img qcimg imgb"><img src="images/w2.png" /></div>
<div class="slide-txt">
<div class="txt_t">专注品牌形象创新<br />提供视觉与策略方案</div>
<div class="txt_c">矩阵动力汽车服务机构-我们采用多元形象视觉<br />应用组合，增强品牌个性表现力。</div>
<div class="bt jd_bt">
<div data-to="b3" class="bt_t"><a href="#">进入案例</a></div>
<div class="bt_b"></div>
</div>
</div>
</li>
<li>
<div class="slide-bg"><img src="images/p3.jpg" /></div>
<div class="slide-img imgb"><img src="images/w3.png" /></div>
<div class="slide-txt">
<div class="txt_t">入选亚洲创造者150人<br />ASIAN CREATIVES</div>
<div class="txt_c">G’DAY入选ASIAN CREATIVES 使世界为之热情的，<br />亚洲创造者150人，由日本出版机构UBIES企划。</div>
<div class="bt jd_bt">
<div data-to="b3" class="bt_t"><a href="#">进入事件</a></div>
<div class="bt_b"></div>
</div>
</div>
</li>
</ul>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.leftInOut.1.0.0.js"></script>
<script src="js/main.js"></script>
</body>
</html>