首页>>焦点图>>播放/暂停的 slide滑动焦点图(2014-02-07)

播放/暂停的 slide滑动焦点图

播放/暂停的 slide滑动焦点图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.     <div id="slides">  
  3.       <img src="../mohe.png" alt="">  
  4.       <img src="../sanya.jpg" alt="">  
  5.       <img src="../dalian.jpg" alt="">  
  6.       <img src="../dandong.png" alt="">  
  7.     </div>  
  8.   </div>  

 

JavaScript Code
  1. <script>  
  2.     $(function() {  
  3.       $('#slides').slidesjs({  
  4.         width: 600,  
  5.         height: 328,  
  6.         play: {  
  7.           active: true,  
  8.           auto: true,  
  9.           interval: 4000,  
  10.           swap: true  
  11.         }  
  12.       });  
  13.     });  
  14.   </script>  

 

CSS Code
  1. <style>  
  2.     #slides {  
  3.       display: none  
  4.     }  
  5.   
  6.     .container {  
  7.       margin: 0 auto  
  8.     }  
  9.   
  10.     /* For tablets & smart phones */  
  11.     @media (max-width: 767px) {  
  12.       body {  
  13.         padding-left: 20px;  
  14.         padding-right: 20px;  
  15.       }  
  16.       .container {  
  17.         width: auto  
  18.       }  
  19.     }  
  20.   
  21.     /* For smartphones */  
  22.     @media (max-width: 480px) {  
  23.       .container {  
  24.         width: auto  
  25.       }  
  26.     }  
  27.   
  28.     /* For smaller displays like laptops */  
  29.     @media (min-width: 568px) and (max-width: 579px) {  
  30.       .container {  
  31.         width: 600px  
  32.       }  
  33.     }  
  34.   
  35.     /* For larger displays */  
  36.     @media (min-width: 500px) {  
  37.       .container {  
  38.         width: 600px  
  39.       }  
  40.     }  
  41.   </style>  

 


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