<!DOCTYPE HTML> <HTML> <HEAD> <META name="Generator" content="EditPlus"> <META name="Author" content="ResumeBB"> <META name="Keywords" content=""> <META name="Description" content=""> <TITLE> 图片轮播 </TITLE> <style> body,ul{ margin:0; } ul{ padding:0; } .banner{ width:1000px; height:650px; margin:50px auto; } .banner .pic{ position:relative; width:100%; height:100%; } .banner .pic li{ position:absolute; width:100%; height:100%; list-style:none; } .banner .pic li img{ width:100%; height:80%; transform:scale(0); opacity:0; transition:all 0.7s ease-in-out; } .banner .pic li input:checked + img{/* 紧邻兄弟选择器 */ transform:scale(1); opacity:1; } .banner .pic li label{ z-index:15; display:none; position:absolute; top:50%; margin-top:-50px; width:100px; height:100px; font-size:100px; line-height:100px; text-align:center; background-color:rgba(255,255,255,0.3); color:###b9b9b9; opacity:0.5; text-shadow:0 0 15px; font-weight:bold; } .banner .pic li label.prev{ left:0; } .banner .pic li label.next{ right:0; } .banner .pic li label:hover{ opacity:1; } .banner .pic li input:checked ~ label{/* 后面的label兄弟选择器 */ display:block; } input{ display:none; } </style> </HEAD> <BODY> <div class='banner'> <ul class="pic"> <li> <input id='img-1' type="radio" name='radio' checked> <img width='100%' height='100%' src="images/1.jpg" /> <label for='img-14' class='prev'><</label> <label for='img-2' class='next'>></label> </li> <li> <input id='img-2' type="radio" name='radio'> <img width='640' height='425' src="images/2.jpg" /> <label for='img-1' class='prev'><</label> <label for='img-3' class='next'>></label> </li> <li> <input id='img-3' type="radio" name='radio'> <img width='640' height='425' src="images/3.jpg" /> <label for='img-2' class='prev'><</label> <label for='img-4' class='next'>></label> </li> <li> <input id='img-4' type="radio" name='radio'> <img width='640' height='425' src="images/4.jpg" /> <label for='img-3' class='prev'><</label> <label for='img-5' class='next'>></label> </li> <li> <input id='img-5' type="radio" name='radio'> <img width='640' height='425' src="images/5.jpg" /> <label for='img-4' class='prev'><</label> <label for='img-6' class='next'>></label> </li> <li> <input id='img-6' type="radio" name='radio'> <img width='640' height='425' src="images/6.jpg" /> <label for='img-5' class='prev'><</label> <label for='img-7' class='next'>></label> </li> <li> <input id='img-7' type="radio" name='radio'> <img width='640' height='425' src="images/7.jpg" /> <label for='img-6' class='prev'><</label> <label for='img-8' class='next'>></label> </li> <li> <input id='img-8' type="radio" name='radio'> <img width='640' height='425' src="images/8.jpg" /> <label for='img-7' class='prev'><</label> <label for='img-9' class='next'>></label> </li> <li> <input id='img-9' type="radio" name='radio'> <img width='640' height='425' src="images/9.jpg" /> <label for='img-8' class='prev'><</label> <label for='img-10' class='next'>></label> </li> <li> <input id='img-10' type="radio" name='radio'> <img width='640' height='425' src="images/10.jpg" /> <label for='img-9' class='prev'><</label> <label for='img-11' class='next'>></label> </li> <li> <input id='img-11' type="radio" name='radio'> <img width='640' height='425' src="images/11.jpg" /> <label for='img-10' class='prev'><</label> <label for='img-12' class='next'>></label> </li> <li> <input id='img-12' type="radio" name='radio'> <img width='640' height='425' src="images/12.jpg" /> <label for='img-11' class='prev'><</label> <label for='img-13' class='next'>></label> </li> <li> <input id='img-13' type="radio" name='radio'> <img width='640' height='425' src="images/13.jpg" /> <label for='img-12' class='prev'><</label> <label for='img-14' class='next'>></label> </li> <li> <input id='img-14' type="radio" name='radio'> <img width='640' height='425' src="images/14.jpg" /> <label for='img-13' class='prev'><</label> <label for='img-1' class='next'>></label> </li> </ul> </div> </BODY> </HTML> 文章来源: 图片轮播