首页>>焦点图>>纯CSS幻灯片演示(2019-05-28)

纯CSS幻灯片演示

本例是纯CSS的，非必要还是建议用js的，可以设置的参数更多，效果也更加炫酷，本站有很多焦点图

纯CSS幻灯片演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul class="slides">  
  2.     <input type="radio" name="radio-btn" id="img-1" checked>  
  3.     <li class="slide-container">  
  4.         <div class="slide">  
  5.             <img src="images/1.jpg">  
  6.         </div>  
  7.         <div class="nav">  
  8.             <label for="img-6" class="prev">‹</label>  
  9.             <label for="img-2" class="next">›</label>  
  10.         </div>  
  11.     </li>  
  12.     <input type="radio" name="radio-btn" id="img-2">  
  13.     <li class="slide-container">  
  14.         <div class="slide">  
  15.             <img src="images/2.jpg">  
  16.         </div>  
  17.         <div class="nav">  
  18.             <label for="img-1" class="prev">‹</label>  
  19.             <label for="img-3" class="next">›</label>  
  20.         </div>  
  21.     </li>  
  22.     <li class="nav-dots">  
  23.         <label for="img-1" class="nav-dot" id="img-dot-1"></label>  
  24.         <label for="img-2" class="nav-dot" id="img-dot-2"></label>  
  25.          
  26.     </li>  
  27. </ul>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_782.html