Skip to content

Commit ed35d7c

Browse files
zhouxiaotianzhouxiaotian
committed
20170817
1 parent b068a83 commit ed35d7c

File tree

3 files changed

+111
-0
lines changed

3 files changed

+111
-0
lines changed

‎WEEK4/BANNER/banner.png‎

22.2 KB
Loading

‎WEEK4/BANNER/css/banner.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.banner {
2+
position: relative;
3+
margin: 0 auto;
4+
width: 1000px;
5+
height: 300px;
6+
overflow: hidden;
7+
}
8+
9+
.banner .imgBox {
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
width: 4000px; /*需要计算:图片的数量 * BANNER的宽度*/
14+
height: 100%;
15+
}
16+
17+
.banner .imgBox li {
18+
float: left;
19+
width: 1000px;
20+
height: 100%;
21+
/*为了后期做图片的懒加载,我们把图片所在区域设置一张默认的背景图占位*/
22+
background: url("../img/default.gif") no-repeat center center #EEE;
23+
}
24+
25+
.banner .imgBox li a, .banner .imgBox li a img {
26+
display: block;
27+
width: 100%;
28+
height: 100%;
29+
}
30+
31+
.banner .imgBox li a img {
32+
display: none; /*图片懒加载的准备*/
33+
}
34+
35+
.banner .focus {
36+
position: absolute;
37+
bottom: 10px;
38+
z-index: 999;
39+
width: 100%;
40+
text-align: center;
41+
font-size: 0;
42+
}
43+
44+
.banner .focus li {
45+
display: inline-block;
46+
margin: 0 5px;
47+
width: 18px;
48+
height: 18px;
49+
background: lightblue;
50+
border-radius: 50%;
51+
cursor: pointer;
52+
}
53+
54+
.banner .focus li.select {
55+
background: lightcoral;
56+
}
57+
58+
.banner .change {
59+
position: absolute;
60+
top: 50%;
61+
margin-top: -22.5px;
62+
width: 30px;
63+
height: 45px;
64+
background: url("../img/pre.png") no-repeat;
65+
66+
opacity: 0.5;
67+
filter: alpha(opacity=50);
68+
display: none;
69+
}
70+
71+
.banner .change:hover {
72+
opacity: 1;
73+
filter: alpha(opacity=100);
74+
}
75+
76+
.banner .change.changeLeft {
77+
left: 20px;
78+
background-position: 0 0;
79+
}
80+
81+
.banner .change.changeRight {
82+
right: 20px;
83+
background-position: -45px 0;
84+
}
85+

‎WEEK4/BANNER/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,34 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>珠峰培训</title>
6+
7+
<!--import css-->
8+
<link rel="stylesheet" href="css/reset.min.css">
9+
<link rel="stylesheet" href="css/banner.css">
610
</head>
711
<body>
12+
<div class="banner">
13+
<!--IMG-->
14+
<ul class="imgBox">
15+
<li><a href="#"><img src="img/banner1.jpg" alt=""></a></li>
16+
<li><a href="#"><img src="img/banner2.jpg" alt=""></a></li>
17+
<li><a href="#"><img src="img/banner3.jpg" alt=""></a></li>
18+
<li><a href="#"><img src="img/banner4.jpg" alt=""></a></li>
19+
</ul>
20+
21+
<!--FOCUS-->
22+
<ul class="focus">
23+
<li class="select"></li>
24+
<li></li>
25+
<li></li>
26+
<li></li>
27+
</ul>
28+
29+
<!--CHANGE-->
30+
<a href="javascript:;" class="change changeLeft"></a>
31+
<a href="javascript:;" class="change changeRight"></a>
32+
</div>
33+
834

935
</body>
1036
</html>

0 commit comments

Comments
 (0)