首页>>焦点图>>jSlider简洁的幻灯片自适应全屏宽度(2019-06-21)

jSlider简洁的幻灯片自适应全屏宽度

jSlider简洁的幻灯片自适应全屏宽度
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="jSlider" id="slider1" data-loop="true">  
  2.             <div><img src="../788/images/photo1.jpg" alt="sample photo">  
  3.             </div>  
  4.             <div><img src="../788/images/photo2.jpg" alt="sample photo">  
  5.                 <div class="sub-content-sample">  
  6.                     <p>各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</p>  
  7.                 </div>  
  8.             </div>  
  9.             <div><img src="../788/images/photo3.jpg" alt="sample photo">  
  10.             </div>  
  11.   
  12.               
  13.         </div>  

 

CSS Code
  1. <style type="text/css">  
  2.             #slider1 {  
  3.                 width: 100%;  
  4.                 max-height: 700px;  
  5.                 margin-bottom: 75px;  
  6.             }  
  7.             .sub-content-sample {  
  8.                 font-size: 30px;  
  9.                 line-height: 1.25;  
  10.                 padding: 20px 40px;  
  11.                 width: 50%;  
  12.                 min-width: 200px;  
  13.                 max-width: 500px;  
  14.                 color: #fff;  
  15.                 background: #000;  
  16.                 background: rgba(0, 0, 0, 0.5);  
  17.                 position: absolute;  
  18.                 top: 20px;  
  19.                 rightright: 20px;  
  20.             }  
  21.             .sub-content-sample p {  
  22.                 margin: 0;  
  23.                 padding: 0;  
  24.             }  
  25.             .sub-content-sample a {  
  26.                 color: #fff;  
  27.                 font-weight: bold;  
  28.             }  
  29.               
  30.             /* responsive rules */  
  31.             @media (max-width: 1199px) {  
  32.                 .sub-content-sample {  
  33.                     font-size: 20px;  
  34.                 }  
  35.             }  
  36.             @media (max-width: 991px) {  
  37.             }  
  38.             @media (max-width: 767px) {  
  39.                 .sub-content-sample {  
  40.                     font-size: 12px;  
  41.                     padding: 10px;  
  42.                 }  
  43.             }  
  44.             @media (max-width: 480px) {  
  45.                 .sub-content-sample {  
  46.                     font-size: 10px;  
  47.                 }  
  48.             }  
  49.             @media (max-width: 384px) {  
  50.                 .sub-content-sample {  
  51.                     font-size: 10px;  
  52.                 }  
  53.             }  
  54.               
  55.               
  56.         </style>  

 


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