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>