1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <style>
7 .container {position:relative;width:600px;height:400px;overflow-y:hidden;}
8 .container img{ display:block;}
9 .container .silder {width:100%;}
10 .container .silder img{display:none;}
11 .container .silder img:first-child{display:block;}
12 .container .title{position:absolute;bottom:0px;margin:0;width:100%;background-color:#000;opacity:0.5;line-height:45px;}
13 .container .title span{ margin-left:20px;color:#fff;text-decoration:none;}
14 .container .controls{ position:absolute;bottom:18px;right:10px;line-height:10px;z-index:99;}
15 .container .controls ul li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; margin-right: 5px; }
16 .container .controls label{ display:inline-block;width:22px;margin:auto 1px;height:22px;border-radius:12px;background-color:gray;text-align:center;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
17 .container .controls label:hover {cursor:pointer;background-color:green;}
18 .container input[type="radio"] { display: none;}
19 .controls ul li #lbl1 { /* background-color:#6666ff;*/ }
20 .container span:before {
21 content: "我的前端之路1";
22 }
23 input[type="radio"][id="index1"]:checked ~.controls ul li #lbl1 {
24 background-color:#6666ff;
25 }
26 input[type="radio"][id="index1"]:checked ~.silder >.index1 {
27 display:block;
28 }
29 input[type="radio"][id="index1"]:checked ~.silder >.index2,.index3 {
30 display:none;
31 }
32 input[type="radio"][id="index1"]:checked ~.title span:before {
33 content:"我的前端之路1";
34 }
35
36 input[type="radio"][id="index2"]:checked ~.controls ul li #lbl2 {
37 background-color:#6666ff;
38 }
39 input[type="radio"][id="index2"]:checked ~.silder >.index2 {
40 display:block;
41 }
42 input[type="radio"][id="index2"]:checked ~.silder >.index1,.index3 {
43 display:none;
44 }
45 input[type="radio"][id="index2"]:checked ~.title span:before {
46 content:"我的前端之路2";
47 }
48
49 input[type="radio"][id="index3"]:checked ~.controls ul li #lbl3 {
50 background-color:#6666ff;
51 }
52 input[type="radio"][id="index3"]:checked ~.silder >.index3 {
53 display:block;
54 }
55 input[type="radio"][id="index3"]:checked ~.silder >.index1,.index3 {
56 display:none;
57 }
58 input[type="radio"][id="index3"]:checked ~.title span:before {
59 content:"我的前端之路3";
60 }
61 </style>
62 </head>
63 <body>
64 <div class="container">
65 <input type="radio" name="silder" id="index1" checked />
66 <input type="radio" name="silder" id="index2" />
67 <input type="radio" name="silder" id="index3" />
68 <div class="controls">
69 <ul>
70 <li>
71 <label for="index1" id="lbl1">1</label>
72 </li>
73 <li>
74 <label for="index2" id="lbl2">2</label>
75 </li>
76 <li>
77 <label for="index3" id="lbl3">3</label>
78 </li>
79 </ul>
80 </div>
81 <div class="silder">
82 <img src="img1.png" alt="我的前端之路1" class="index1" id="img1" />
83 <img src="img2.jpg" alt="我的前端之路2" class="index2" id="img2" />
84 <img src="img3.jpg" alt="我的前端之路3" class="index3" id="img3" />
85 </div>
86 <p class="title">
87 <span>
88
89 </span>
90 </p>
91 </div>
92 </body>
93 </html>
浙公网安备 33010602011771号