ResponsiveSlides javascript 幻灯片插件
2015-02-04 10:15
162 查看
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的默认命名空间(比如你想在一个页面添加多个幻灯片时使用) });
具体参数请参见官网 有详细说明
相关文章推荐
- javascript版幻灯片效果
- 用Javascript检测Flash插件是否安装以及版本
- 插件:检测javascript的内存泄漏
- javascript幻灯片效果_javascript教程
- 本站图片幻灯片程序(javascript)
- 纯JavaScript实现的幻灯片(兼容IE和Firefox)
- 插件:检测javascript的内存泄漏
- javascript实例教程(4) 探测浏览器插件
- javascript之幻灯片
- JavaScript 判断是否安装了 Flash 插件
- javascript版幻灯片效果
- javascript版幻灯片效果
- 我的JavaScript幻灯片效果!
- javascript版幻灯片效果
- JavaScript图片幻灯片显示效果
- javascript版幻灯片效果
- javascript版幻灯片效果
- 贡献一个新浪的幻灯片(javascript)
- javascript超强幻灯片代码
- 推荐两款基于Eclipse的Javascript插件