ResponsiveSlides javascript 幻灯片插件

标签：

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

第一步：添加链接

<script src="./js/responsiveslides.min.js"></script>
<script src="./js/jquery.min.js"></script>

<ul class="rslides" id="slider4">
        <li>
            <img src="./images/banner.jpg" alt="">

            <div class="caption bounceInDown">
                <div class="slide-text-info">
                    <h1>Intellectual Property has the Shelf Life111</h1>

                    <p>of a Banana.</p>
                    <a class="banner-btn wow bounceIn" data-wow-delay="0.4s" href="#">Become a Member</a>
                </div>
            </div>
        </li>
        <li>
            <img src="./images/banner.jpg" alt="">

            <div class="caption">
                <div class="slide-text-info bounceInDown">
                    <h1>Intellectual Property has the Shelf Life222</h1>

                    <p>of a Banana.</p>
                    <a class="banner-btn wow bounceIn" data-wow-delay="0.4s" href="#">Become a Member</a>
                </div>
            </div>
        </li>
        <li>
            <img src="./images/banner.jpg" alt="">

            <div class="caption">
                <div class="slide-text-info bounceInDown">
                    <h1>Intellectual Property has the Shelf Life333</h1>

                    <p>of a Banana.</p>
                    <a class="banner-btn wow bounceIn" data-wow-delay="0.4s" href="#">Become a Member</a>
                </div>
            </div>
        </li>
    </ul>

<script>
$(function () { 
    $("#slides").responsiveSlides(); 
  }); 
</script>

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

ResponsiveSlides javascript 幻灯片插件

标签：

原文地址：http://blog.csdn.net/liuxiaochen123/article/details/43482581