首页>>焦点图>>jSlider简洁的幻灯片(2019-06-14)

jSlider简洁的幻灯片

jSlider简洁的幻灯片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="top">  
  2.             <div class="jSlider" id="slider1">  
  3.                 <div><img src="images/photo1_m.jpg"></div>  
  4.                 <div><img src="images/photo2_m.jpg"></div>  
  5.                 <div><img src="images/photo3_m.jpg"></div>  
  6.                 <div><img src="images/photo4_m.jpg"></div>  
  7.                 <div><img src="images/photo5_m.jpg"></div>  
  8.                 <div><img src="images/photo6_m.jpg"></div>  
  9.             </div>  
  10.         </div>  

 

XML/HTML Code
  1. <style type="text/css">  
  2.             #slider1 {  
  3.                 width: 100%;  
  4.                 height: 394px;  
  5.                 margin: 0 auto;  
  6.                 border: 7px solid rgba(0, 0, 0, .35);  
  7.                 box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .1);  
  8.                 border-radius: 5px;  
  9.             }  
  10.   
  11.             /* responsive rules */  
  12.             @media (max-width: 713px) {  
  13.                 #slider1 {  
  14.                     width: 100%;  
  15.                     height: auto; /* reset slider height to automatically fix with the first image height. */  
  16.                     border: none;  
  17.                     margin-top: 0;  
  18.                     -webkit-border-radius: 0;  
  19.                     border-radius: 0;  
  20.                 }  
  21.             }  
  22.   
  23.         </style>  

 


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