摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。
你可以点击链接或者图片观看效果
和其他幻灯演示插件相比最大的特点:
1.文件较小(通过缩减和gz压缩只有792字节)
2.功能简单(R.js只支持两种模式:图片自动淡出淡入和使用页码标签来手动切换图片。)
用法:
第一步:添加链接
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="responsiveslides.min.js"></script>
第二步:添加标签
- <div id="slides">
- <img src="1.jpg" alt="" />
- <img src="2.jpg" alt="" />
- <img src="3.jpg" alt="" />
- </div>
第三步:链接上幻灯(Hook up the slideshow)
- <script>
- $(function () {
- $("#slides").responsiveSlides();
- });
- </script>
第四步:自定义设置
- $("#slides").responsiveSlides({
- speed: 4000, //整数:幻灯片切换间隔时间,单位是ms
- fade: 1000, //整数:淡入淡出的时间, in milliseconds
- auto: true, //布尔类型:是否手动切换图片(“auto:false”会自动添加页面标签)
- maxwidth: 800, //整数:幻灯片和图片区域的最大宽度,单位是像素px
- namespace: ‘rs‘ //字符串:修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用)
- });
如果你不需要页码属性,这就已经完成了!
修改属性"auto:false" (显示页码标签)效果示例:
你可以点击链接或者图片观看效果
下面浏览器已通过测试:
• Internet Explorer 6,7,8,9
• Firefox 2,3,6,8
• Safari 5
• Chrome 15
• Opera 11.5
• iOS Safari
• Opera Mobile 10.1
• Opera Mini for iOS
• IE7 Mobile
• Firefox Mobile
• Android browser
• Kindle browser
(复制的,记录每一天!!!!)
时间: 2024-11-05 11:37:02