ResponsiveSlides javascript 幻灯片插件

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。

第一步：添加链接

 
 

  
  

   
   

    
    [javascript] 
    
    view plain
    
    copy
   
   
  
  
  
  
<script src="./js/responsiveslides.min.js"></script>  
<script src="./js/jquery.min.js"></script>  
 
 

第二步：添加图片

[javascript] view plain copy

1. <ul class="rslides" id="slider4">  
2.         <li>  
3.             <img src="./images/banner.jpg" alt="">  
4.   
5.             <div class="caption bounceInDown">  
6.                 <div class="slide-text-info">  
7.                     <h1>Intellectual Property has the Shelf Life111</h1>  
8.   
9.                     <p>of a Banana.</p>  
10.                     <a class="banner-btn wow bounceIn" data-wow-delay="0.4s" href="#">Become a Member</a>  
11.                 </div>  
12.             </div>  
13.         </li>  
14.         <li>  
15.             <img src="./images/banner.jpg" alt="">  
16.   
17.             <div class="caption">  
18.                 <div class="slide-text-info bounceInDown">  
19.                     <h1>Intellectual Property has the Shelf Life222</h1>  
20.   
21.                     <p>of a Banana.</p>  
22.                     <a class="banner-btn wow bounceIn" data-wow-delay="0.4s" href="#">Become a Member</a>  
23.                 </div>  
24.             </div>  
25.         </li>  
26.         <li>  
27.             <img src="./images/banner.jpg" alt="">  
28.   
29.             <div class="caption">  
30.                 <div class="slide-text-info bounceInDown">  
31.                     <h1>Intellectual Property has the Shelf Life333</h1>  
32.   
33.                     <p>of a Banana.</p>  
34.                     <a class="banner-btn wow bounceIn" data-wow-delay="0.4s" href="#">Become a Member</a>  
35.                 </div>  
36.             </div>  
37.         </li>  
38.     </ul>  

第三步：链接幻灯片

[javascript] view plain copy

1. <script>  
2. $(function () {   
3.     $("#slides").responsiveSlides();   
4.   });   
5. </script>  

第四步：添加参数

[javascript] view plain copy

1. $("#slides").responsiveSlides({   
2.   speed: 4000, //整数：幻灯片切换间隔时间，单位是ms   
3.   fade: 1000, //整数：淡入淡出的时间, in milliseconds   
4.   auto: true, //布尔类型：是否手动切换图片(“auto:false”会自动添加页面标签)  
5.   maxwidth: 800, //整数：幻灯片和图片区域的最大宽度，单位是像素px  
6.   namespace: 'rs' //字符串：修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用)   
7. });   

具体参数请参见官网 有详细说明